jQuery – 单击菜单项时关闭手风琴菜单

当单击子菜单链接时，如何停止手风琴菜单ul.sub-menu关闭？

单击父项时，手风琴会打开罚款，但当在其下方的级别中单击子菜单项时，它会再次关闭。

这是我的HTML：

 
parent 1 
 
1st child item
 
 
 
parent 2 
 
2nd child item
 
3rd child item
 
 
 
parent 3 
 
4th child item
 
 
 
​​​​​​​​ 

这是我的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'); }); });​ 

Answer 1

手风琴给你，

HTML：

 
 
parent 1 
 
1st child item
 
 
 
parent 2 
 
2nd child item
 
3rd child item
 
 
 
parent 3 
 
4th child item
 
 
 
​​​​​​​​ 

CSS：

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{ } } }); 

Answer 2

编辑 ：

而不是return语句，使用event.stopPropagation()来阻止事件传播到父级。

 $('.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'); }); 

这将确保您的标签上的点击不会传播到父

从而导致菜单slideToggle （即崩溃，因为它已处于展开状态）

演示： http ： //jsfiddle.net/qNyR6/