我有一个主菜单,将在
jquery中显示带有click事件的子菜单(客户端想要点击而不是悬停)所以我得到它工作但我仍然无法找出一件事：我有菜单和子菜单正常工作所以当我点击“新闻”时,子菜单很好地向下滑动,当我点击“新闻”时,它会关闭,但是如果在打开新闻’子菜单后我点击“资源”,则会出现相应的子菜单,但新闻’子菜单保持打开状态,我希望在点击另一个菜单项或主菜单区域外的任何想法时关闭前一个子菜单？这是我得到的：
<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;
});
});
解决方法
尝试这样的事情
$(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/