单击Jquery打开和关闭子菜单

我有一个主菜单，它将在jquery中显示带有click事件的子菜单（客户端想要点击而不是hover）所以我让它工作但是我仍然无法找到一件事：我有菜单和子菜单正常工作所以当我点击“新闻”时，子菜单很好地向下滑动，当我点击“新闻”时它会关闭，但是如果在打开新闻’子菜单后我点击“资源”，则会出现相应的子菜单但是新闻’子菜单保持打开状态，我希望在点击其他菜单项或主菜单区域外的任何想法时关闭上一个子菜单？ 这是我得到的：

 
Home
 
About Us
 
 News 
 
sub menu 1
 
sub menu 2
 
sub menu 3
 
sub menu 4
 
sub menu 5
 
sub menu 6
 
 
 
Jobs
 
Contact Us
 
Admin
 
 Resources 
 
sub menu 1
 
sub menu 2
 
sub menu 3
 
sub menu 4
 
sub menu 5
 
sub menu 6
 
 
 
New Button
  

和jquery：

  $(function(){ $('#MainMenu').find('> li').click(function(){ $(this).find('ul') .stop(true, true).slideToggle(400); return false; }); }); 

Answer 1

尝试这样的事情

 $(function() { $('#MainMenu > li').click(function(e) { // limit click to children of mainmenue var $el = $('ul',this); // element to toggle $('#MainMenu > li > ul').not($el).slideUp(); // slide up other elements $el.stop(true, true).slideToggle(400); // toggle element return false; }); $('#MainMenu > li > ul > li').click(function(e) { e.stopPropagation(); // stop events from bubbling from sub menu clicks }); });​ 

http://jsfiddle.net/Ssu32/

Answer 2

只需将此行添加到您的代码中即可

 $('#MainMenu > li').not(this).find('ul').slideUp(); 

完整的代码

 $('#MainMenu').find('> li').click(function() { $('#MainMenu > li').not(this).find('ul').slideUp(); $(this).find('ul').stop(true, true).slideToggle(400); return false; });​ 

检查小提琴