点击隐藏菜单

Question

我是一位有用的助手，可以为您翻译文本。

我有一个下拉菜单，当我的用户点击链接时，它将滑动向下。但是，我不知道如何使它在用户点击页面上任何地方（当然不包括菜单）时向上滑动。

我的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()，它不起作用，因为它只会在滑下后立刻向上滑起来。

谢谢你的帮助。

编辑:

谢谢大家！但是如果我同时有两个这样的子菜单打开怎么办？如何防止这种情况发生？

我只想允许打开1个。

- oliverbj

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

Fiddle: http://jsfiddle.net/jonathansampson/qQsdN/

这段内容介绍了一个名为"Fiddle"的网站，它可以让开发者在网页上进行IT技术方面的代码测试和调试。通过点击链接，用户可以进入该网站并开始使用它提供的功能。

- Sampson

---

谢谢！这个很好用。我已经更新了我的答案，因为我遇到了一个新问题。 - oliverbj

在您的点击处理程序中，在显示子菜单之前，将所有可见的子菜单向上滑动。 - Sampson

Answer 2

这个 JQuery 应该可以工作：

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

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

- user1408440

Answer 3

jQuery(this).find() 会查找 "this" 的后代。在你的代码中，由于新的闭包 "function(). "，"this" 已经发生了变化。

尝试这样做：

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

});

- mawcsco