多级手风琴式导航菜单
Multi Level Accordion Like Navigation Menu
尝试使用jquery
创建一个类似手风琴的多级导航菜单。我从一篇帖子中得到了这个,我能够做到,但挑战是点击sub-sub-items
时不会显示。
FIDDLE
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();
});
请帮我把这个修好。
您的选择器有点过于具体,与html中的类相同。
无需使用sub-sub-menu
,只需将所有子菜单保留为sub-menu
,无论它们嵌套得如何。
另外,松开选择器,不要使用子选择器>
。
更新的小提琴:http://jsfiddle.net/66kJs/4/(单击项目2,然后单击子项目1)
更新:忘记了手风琴的影响!修复了更新:删除了stop()
-如果在动画过程中交互,它将留下元素先前状态的工件
相关文章:
- 如何在angularjs中进行简单的菜单导航
- jQuery circle菜单导航在切换关闭后创建小圆圈
- 垂直菜单/导航 - WordPress/JSFiddle.
- 垂直菜单/导航自动滚动
- jQuery增加了菜单导航的延迟,可用性
- Ionic:带有选项卡和侧菜单导航问题的主详细信息
- Jquery:选项卡式菜单导航,根据所选菜单激活和停用
- 防止在菜单/导航系统的特定屏幕宽度下触发 jQuery 函数
- 菜单导航不适用于 jquery 日期选择器
- 引导侧菜单导航问题
- 从左侧的推送菜单导航中滑出
- 从引导导航栏下拉菜单导航到角度页面模板
- CSS-需要帮助弄清楚我的下拉菜单导航哪里出了问题
- 子菜单导航切换错误
- 我的Bootstrap模式锚不是从一个菜单(导航栏)的行项目内工作
- Jquery手风琴菜单-导航到新页面时保持打开状态
- 双引导菜单's导航条固定顶部
- 如何从浏览器中的菜单导航到不同的页面
- 如何在滚动后自动更改活动菜单(菜单导航)?
- 突出显示重复的