点击打开和关闭子菜单jquery

我有一个主菜单，将显示在jquery中的点击事件的子菜单（客户端想点击而不是悬停），所以我得到它的工作，但我仍然无法弄清楚一件事：我有菜单和子菜单正常工作，所以当我点击“新闻”时，子菜单很好地滑落，当我点击“新闻”时它会关闭，但是如果在打开新闻子菜单后点击“资源”相应的子菜单会出现，但是新闻的子菜单保持打开状态，当点击另一个菜单项或主菜单区域外的任何想法时，我想要关闭上一个子菜单？这里就是我的了：点击打开和关闭子菜单jquery

<ul id="MainMenu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li> 
       <a href="#">News</a> 
       <ul class="noJS"> 
       <li><a href="#">sub menu 1</a></li> 
       <li><a href="#">sub menu 2</a></li> 
       <li><a href="#">sub menu 3</a></li> 
       <li><a href="#">sub menu 4</a></li> 
       <li><a href="#">sub menu 5</a></li> 
       <li><a href="#">sub menu 6</a></li> 
      </ul>       
     </li> 
     <li><a href="#">Jobs</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Admin</a></li> 
     <li> 
      <a href="#">Resources</a> 
      <ul class="noJS"> 
       <li><a href="#">sub menu 1</a></li> 
       <li><a href="#">sub menu 2</a></li> 
       <li><a href="#">sub menu 3</a></li> 
       <li><a href="#">sub menu 4</a></li> 
       <li><a href="#">sub menu 5</a></li> 
       <li><a href="#">sub menu 6</a></li> 
      </ul> 
     </li> 
     <li class="lastChild"><a href="#">New Button</a></li> 
    </ul>

和jQuery的：

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

来源

2012-11-13 Joxmar

尝试是这样的

$(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/

来源

2012-11-13 16:17:39

它的作品！但是我不能在页面上的其他地方点击关闭子菜单 – Joxmar

你能举一个例子，以便我可以解决你的问题吗？我只能假设问题是什么。我猜你会需要将点击绑定到你的body/html，并使元素滑动 –

这会工作吗？ http://jsfiddle.net/joxmar/m4Nwe/ – Joxmar

只是这行添加到您的代码

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

Check Fiddle

来源

2012-11-13 16:50:07

非常感谢这一个也有效。 – Joxmar

点击打开和关闭子菜单jquery

回答

相关问题