[英]Multi Level Accordion Like Navigation Menu
Trying to create a multi level accordion like navigation menu using jquery
. 尝试使用
jquery
创建像导航菜单这样的多层次手风琴。 I got this from a post and i was able to do it but the challenge is the sub-sub-items
are not getting displayed when clicked on it. 我是从帖子中得到的,我能够做到,但是挑战在于,单击
sub-sub-items
时不会显示sub-sub-items
。
HTML: 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: 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();
});
Please help me in getting this fixed. 请帮助我解决此问题。
Your selectors are bit too specific, same with the classes in the html. 您的选择器过于具体,与html中的类相同。
No need to use sub-sub-menu
, just keep all sub menus as sub-menu
, no matter how nested they are. 无需使用
sub-sub-menu
,只需将所有子菜单保留为sub-menu
,无论它们的嵌套程度如何。
Also, loosen up the selector, don't use the child selector >
. 另外,松开选择器,不要使用子选择器
>
。
Updated fiddle: http://jsfiddle.net/66kJs/4/ (click Item 2, then Sub Item 1) 更新的提琴: http : //jsfiddle.net/66kJs/4/ (单击项目2,然后单击子项目1)
Update: forgot about the accordion affect! 更新:忘记手风琴的影响! made the fix Update: removed the
stop()
- if interacting during animation, it would leave artifacts of the previous state of elements 进行了更新:删除了
stop()
-如果在动画过程中进行交互,则将保留元素先前状态的伪像
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.