1

jquery の slideDown/slideUp/slideToggle 関数を使用して、これらの折りたたみ可能な要素をクリックしたときにアニメーション化する方法があるかどうかを調べようとしています。要素の HTML レイアウトのスニペットを次に示します。

<ul> 
                    <li class="category1"><a href="#"></a></li>
                        <ul>
                            <div class="tag1">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>

                        </ul>
                    <li class="category2"><a href="#"></a></li>
                        <ul>
                            <div class="tag2">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>  
                        </ul>
                    <li class="category3"><a href="#"></a></li>
                        <ul>
                            <div class="tag3">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>  
                        </ul>

</ul>

これが私が試したJavaScriptコードです。動作しますが、非常に長いです。同じことを達成するためのより効率的な方法があるかどうか疑問に思っています。

$('.category1').click(function(){
    $('.tag1').slideToggle('200');
    $('.tag2').slideUp('200');
    $('.tag3').slideUp('200');
        return false;
});

$('.category2').click(function(){
    $('.tag1').slideUp('200');
    $('.tag2').slideToggle('200');
    $('.tag3').slideUp('200');
        return false;
});

$('.category3').click(function(){
    $('.tag1').slideUp('200');
    $('.tag2').slideUp('200');
    $('.tag3').slideToggle('200');
        return false;
});
4

2 に答える 2

2

li要素のみを要素にネストする必要があるため、マークアップが無効であると確信していますul（間違っている場合は誰かが修正してくれます）。マークアップを次のように変更しました。

<ul class="outer"> 
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat1"><a href="#">derp</a></li>
            <li class="cat1"><a href="#">derp</a></li>
            <li class="cat1"><a href="#">derp</a></li>    
        </ul>
    </li>
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat2"><a href="#">derp</a></li>
            <li class="cat2"><a href="#">derp</a></li>
            <li class="cat2"><a href="#">derp</a></li>    
        </ul>
    </li>
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat3"><a href="#">derp</a></li>
            <li class="cat3"><a href="#">derp</a></li>
            <li class="cat4"><a href="#">derp</a></li>    
        </ul>
    </li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

スクリプトは次のとおりです。

$(".outer > li > a").on("click", function(event) {
    event.preventDefault();
    $(".outer ul").slideUp();   
    var next = $(this).next();
    if(next.is(":visible")) { return; }         
    next.slideDown();
});​

そして、これが実際の例です。

ご覧のとおり、すべてのulセクションを上にスライドしてから、クリックされたアンカーの後に次のセクションを下にスライドします。

于 2012-06-28T21:09:50.120 に答える
0

リストを少し再構築する必要があり、子<ul>を親内に保持したい<li>

$('li[class^=category]').click(function(){
  var cls = $(this).attr('class');
  cls = cls.split('y');
  cls = cls[1];
  $('.tag'+cls).slideToggle('200');          
  $('div[class^=tag]').not("div[class=tag"+cls+"]").slideUp('200');
  return false;
});
于 2012-06-28T21:06:13.140 に答える