我有一个主菜单，它将在 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;
});
});
尝试这样的事情
$(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/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
