Jquery Slidetoggleカスケードを使用した入れ子になったメニューのコルプサイズ

Question

私は以下のjsFiddleで見られるコントロールを持たないHTML構造をレンダリングしました。

すべてのノードを最初は閉じておき、元のリンクがナビゲーション要素として保存されるようにオフセットアイコンで展開したいと思います。

あなたはすべてのサブリストはまた、現在選択されているだけのアイテムではなく、開いて切り替えることが原因となって、私はサブ項目を持つすべての要素のトグルを表現するアイコンを添付していますが、私は私の現在のコードを見つけています表示されます。

誰かがそれほど高く評価してくれたら、下のフィドルから。

<ul> 
    <li><a href='#'>stuff</a></li> 
    <li><a href='#'>stuff</a> 
     <ul class="submenu"> 
      <li><a href='#'>stuff</a></li> 
      <li><a href='#'>stuff</a></li> 
      <li><a href='#'>stuff</a> 
       <ul class="submenu"> 
        <li><a href='#'>stuff</a></li> 
        <li><a href='#'>stuff</a></li> 
        <li><a href='#'>stuff</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href='#'>stuff</a></li> 
</ul> 

$('.submenu').hide(); 

$('.submenu').parents("li").prepend("<i class='glyphicon glyphicon-chevron-right'></i>"); 

$('.glyphicon').click(function(){ 
    $(this).closest('li').find('ul.submenu').slideToggle("fast"); 
}); 

https://jsfiddle.net/vhew4359/1/

Answer 1

でこのコード$(this).closest('li').find('ul.submenu').slideToggle("fast");を交換してください。 $(this).closest('li').find('ul.submenu').slideToggle("fast");は.submenuのすべてをトグルします。直接childrenまたは最初のもののみを切り替えたいとします。

$('.submenu').hide(); 

    $('.submenu').parents("li").prepend("<i class='glyphicon glyphicon-chevron-right'></i>"); 

    $('.glyphicon').click(function(){ 
    // here you were toggling all submenu m only toggling the first one 
    $(this).closest('li').find('ul.submenu').first().slideToggle("fast"); 
    }); 

更新フィドル https://jsfiddle.net/riazxrazor/vhew4359/2/

Answer 2

私はあなたのコードビットを更新した$(this).closest('li').children('ul.submenu').slideToggle("fast");コード