jQuery -单击菜单项时停止关闭折叠菜单
jQuery -单击菜单项时停止关闭折叠菜单
提问于 2012-11-28 13:52:00
如何在单击子菜单链接时停止关闭折叠菜单ul.子菜单？
当单击父项时，accordion打开时会被罚款，但当在其下面的级别中单击子菜单项时，它将再次关闭。
这是我的HTML：
<ul class="menu">
<li><a href="#">parent 1</a>
<ul class="sub-menu">
<li><a href="#">1st child item</a></li>
</ul>
</li>
<li><a href="#">parent 2</a>
<ul class="sub-menu current-menu-parent">
<li><a href="#">2nd child item</a></li>
<li class="current-menu-item"><a href="#">3rd child item</a></li>
</ul>
</li>
<li><a href="#">parent 3</a>
<ul class="sub-menu">
<li><a href="#">4th child item</a></li>
</ul>
</li>
</ul>下面是我的jquery：
jQuery(function($) {
$(".menu > li").children("a").attr('href', 'javascript:void(0)');
$('.sub-menu').hide();
$('.current-menu-parent').show();
$('.menu > li').click(function() {
$(this).find('ul').slideToggle('slow');
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2012-11-28 14:23:58
手风琴给你，
HTML :
<ul class="menu">
<li><a href="javascript:void(0)">parent 1</a>
<ul class="sub-menu">
<li><a href="#">1st child item</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">parent 2</a>
<ul class="sub-menu current-menu-item">
<li><a href="#">2nd child item</a></li>
<li><a href="#">3rd child item</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">parent 3</a>
<ul class="sub-menu">
<li><a href="#">4th child item</a></li>
</ul>
</li>
</ul>CSS:
<style>
.sub-menu{
display:none;
}
.current-menu-item{
display:block;
}
</style>JS:
rel = 0;
$('.sub-menu').hover(function(){ // findind mouse postion
rel = 1; // if mouse on submenu
}, function(){
rel = 0; if mouse out submanu
});
$('.menu > li').live("click",function(){
if(!$(this).hasClass("active")){ // if not already opened
$('.sub-menu').slideUp(); // hide all other submenu
$('.sub-menu',this).slideDown(); // show which your clicked
$(".menu > li").remove('active'); // remove all active class in li
$(this).addClass('active'); //adding active class which your clicked li
}
else{
if(rel==0){
$('.sub-menu').slideUp(); // if clicked already opend parent that will close
$(this).removeClass('active'); // remove all active class
}
else{
}
}
});Stack Overflow用户
发布于 2012-11-28 13:57:36
编辑
使用event.stopPropagation()而不是return语句来停止将事件传播到父级。
$('.menu li a').click(function(e) {
if(!$(this).closest('ul').hasClass('menu')) e.stopPropagation();
});演示：http://jsfiddle.net/qNyR6/1/
添加以下代码将会起作用：
$('.menu li a').click(function() {
return $(this).closest('ul').hasClass('menu');
});这将确保在<a>标签上的点击不会传播到父<li>，从而导致菜单折叠(即折叠，因为它已经处于展开状态)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13606666
复制相关文章
点击加载更多
相似问题
Twitter Bootstrap响应菜单/小型设备:单击菜单项时关闭/折叠菜单
关闭折叠菜单时的jquery停止图像滑块
单击菜单项时，移动菜单不会折叠
在菜单项单击或菜单按钮单击时折叠的Jquery响应导航栏
单击菜单项后关闭的jquery移动菜单
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
