隐藏菜单的onClick(Hide menu onClick)

我有这个下拉菜单中，每当我的用户点击一个链接，将了slideDown。 不过，我不知道如何使它效果基本show，当用户单击页面上（当然不是在菜单上）。

我的CSS是这样的：

<li class="da-header-button message">
    <span class="da-button-count">32</span>
    <a href="#">Notifications</a>
    <ul class="subnav">
        <li class="head"><span class="bold">Notificatons</span></li>
        <li class="item"><a href="#">Under menu</a></li>
        <li class="item"><a href="#">Under menu</a></li>
    </ul>
</li>

我当前的jQuery代码如下所示：

jQuery("ul.topnav li").click(function() { //When trigger is clicked...  
    //Following events are applied to the subnav itself (moving subnav up and down)  
    jQuery(this).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
    jQuery(this).hover(function() {  
    }, function(){  
        jQuery(this).find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
    });  
});

如果我编辑从本最后一个jQuery函数： jQuery(this).hover(function()这样的： jQuery(this).click(function()这是行不通的，因为它只会了slideDown再向上右后。

谢谢您的帮助。

编辑：

多谢你们！ 但是，如果我有两个以下子功能在同一时间开什么？ 我怎样才能避免这种情况？

我只想让自己有1打开。

Answer 1:

向上滑动所有可见的菜单时，点击传播到文档：

$(document).on("click", function(){
    $(".subnav:visible").slideUp();
});

然后，防止这种当你的菜单中通过停止事件传播的发生。

$("ul.topnav").on("click", "li", function(e){
    e.stopPropagation();
    $(".subnav:visible", $(this).siblings()).slideUp("fast");
    $(".subnav", this).slideDown();
});

小提琴： http://jsfiddle.net/jonathansampson/qQsdN/

Answer 2:

这个jQuery应该工作：

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(100);

    },
    function () {
        //hide its submenu
        $('ul', this).slideUp(100);        
    }
);

Answer 3:

jQuery的（本）.find（）将找到的后裔 “这一点。” 在代码中，“本”已经因为新的封闭化“功能（）。”

尝试这个：

jQuery("ul.topnav li").click(function() { //When trigger is clicked...  

    var me = this;
    //Following events are applied to the subnav itself (moving subnav up and down)  
    jQuery(me).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  

    jQuery(me).click(function() {  
    }, function(){  
        jQuery(me).find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
    });  

});

文章来源: Hide menu onClick