1

ネストされた ul タグがいくつかあり、それらを非表示にして、jQuery slideToggle 効果をそれらに適用できるようにします (各要素を個別にスライドさせたい)。しかし、最初の 'ul' の各 'li' タグを押すと、2 番目の 'ul' がすべて一緒に表示されます。

これは私のhtmlコードは次のとおりです。

<div class="content">
    <ul class="mainList">
          <li class="mainItem">List item</li>
                     <ul class="subList">
                         <li class="subItem">List item</li> 
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                     </ul>
          <li class="mainItem">>List item</li>
                     <ul class="subList">
                         <li class="subItem">List item</li> 
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                     </ul>
          <li class="mainItem">>List item</li>
                     <ul class="subList">
                         <li class="subItem">List item</li> 
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                     </ul> 
          <li class="mainItem">>List item</li>
                     <ul class="subList">
                         <li class="subItem">List item</li> 
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                     </ul>
          <li class="mainItem">>List item</li>
                     <ul class="subList">
                         <li class="subItem">List item</li> 
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                     </ul>
    </ul>

</div>

js ファイルは次のようになります。

$('.content').click(function(){
   $('.mainList').slideToggle();
});
$('.mainItem').click(function(){
   $('.subList').slideToggle();
});
4

2 に答える 2

0

あなたが何をしようとしているのかわかりませんが、ここにあなたを助けるかもしれないフィドルがあります: jsfiddle

いくつかのメモ:

あなたのjqueryでは、functin -> functionというエラーがあります。

1 つの要素のみに影響を与えたい場合は、一意の ID または使用する必要があります

$(this)...

これは、イベントをトリガーした要素 (この例では「クリック」) のみを使用することを示し、
next ()、prev()、children()、parent()、find()などを使用して、別の相対を選択できるようになりましたエレメント 。

于 2013-05-14T12:22:17.743 に答える
0

フィドルを作成しました: http://jsfiddle.net/Wrs4c/

マークアップとスクリプトのタイプミスを修正し、正しい jquery を作成しました。

$('.mainItem').next().children().slideToggle();

$('.mainItem').click(function(){
    $(this).next().children().slideToggle();
});
于 2013-05-14T12:16:58.147 に答える