隐藏菜单onClick

Question

我有这个下拉菜单,只要我的用户点击链接,它就会滑动.但是,每当用户点击页面上的某个位置时(当然不在菜单上),我不知道如何使其成为slideUp.

我的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/