上点击jQuery的打开和关闭子菜单(open and close submenus on clic

我将与jQuery的click事件显示子菜单主菜单（客户要点击，而不是徘徊），所以我得到它的工作，但是我仍然无法弄清楚一两件事：我的菜单和子菜单的正常工作，所以当我点击“新闻”子菜单很好地向下滑动，当我点击后面的“新闻”，它关闭回来，但是如果openening消息后子菜单，然后我点击‘资源’各自的子菜单显示，但消息子菜单保持打开状态，我想上一个子菜单到另一个菜单项或主菜单区域外的任何想法，当点击关闭？这里是我的了：

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

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

检查小提琴

文章来源: open and close submenus on click Jquery