像導航菜單一樣的多級別手風琴

嘗試使用jquery創建多級別的手風琴，如導航菜單。我從帖子中得到了這個信息，我能夠做到這一點，但挑戰是sub-sub-items點擊它時沒有得到顯示。像導航菜單一樣的多級別手風琴

HTML：

<div class="sidebar"> 
    <ul> 
     <li> 
      <a href="javascript:void(0)">Item 1</a> 
      <ul class="sub-menu"> 
       <li> 
        <a href="javascript:void(0)">Sub Item 1</a> 
       </li> 
       <li> 
        <a href="javascript:void(0)">Sub Item 2</a> 
       </li> 
       <li> 
        <a href="javascript:void(0)">Sub Item 3</a> 
       </li> 
       <li> 
        <a href="javascript:void(0)">Sub Item 4</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="javascript:viod(0)">Item 2</a> 
      <ul class="sub-menu"> 
       <li> 
        <a href="javascript:void(0)">Sub Item 1</a> 
        <ul class="sub-sub-menu"> 
         <li> 
          <a href="javascript:void(0)">Sub Sub Item 1</a> 
         </li> 
         <li> 
          <a href="javascript:void(0)">Sub Sub Item 2</a> 
         </li> 
         <li> 
          <a href="javascript:void(0)">Sub Sub Item 3</a> 
         </li> 
         <li> 
          <a href="javascript:void(0)">Sub Sub Item 4</a> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="javascript:void(0)">Sub Item 2</a> 
       </li> 
       <li> 
        <a href="javascript:void(0)">Sub Item 3</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="javascript:viod(0)">Item 3</a> 
     </li> 
     <li> 
      <a href="javascript:viod(0)">Item 4</a> 
     </li> 
     <li> 
      <a href="javascript:viod(0)">Item 5</a> 
     </li> 
    </ul> 
</div>

JS：

$('.sidebar > ul > li > a').click(function(ev) { 
    $('.sidebar .sub-menu, .sub-menu .sub-sub-menu').stop().slideUp(); 
    $(this).next('.sub-menu').stop().slideToggle(); 
    ev.stopPropagation(); 
});

請幫助我得到這個固定。

來源

2013-11-23 Unknown User

您的選擇器有點太具體，與html中的類相同。

不需要使用sub-sub-menu，只要保留所有子菜單爲sub-menu，無論它們是多麼嵌套。

另外，鬆開選擇器，不要使用子選擇器>。

更新小提琴：http://jsfiddle.net/66kJs/4/（點擊項目2，然後子項目1）

更新：忘了手風琴的影響！做了修補程序更新：刪除stop() - 如果在動畫過程中進行交互，它會留下以前元素狀態的僞像

來源

2013-11-23 11:18:16 zamnuts

@ zamnuts-感謝您的回覆。但現在我失去了手風琴效果。我正在尋找手風琴效果。我現在能夠做到什麼是小提琴。幫助我讓它像手風琴一樣。而當我點擊一個'子項目'它正在崩潰。 –

@ user2549787我不好，更新了小提琴！（3）http://jsfiddle.net/66kJs/3/ – zamnuts

令人驚歎！非常感謝您的幫助。 –

像導航菜單一樣的多級別手風琴

回答

相關問題