像导航菜单一样的多级别手风琴

尝试使用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

令人惊叹！非常感谢您的帮助。 –

像导航菜单一样的多级别手风琴

回答

相关问题