javascript - 单击页面上的任何位置时的 Javascript 隐藏元素

Question

我有一个滑动 JS 菜单，当您单击“noty_menu”链接时会打开，然后在您再次单击该链接时关闭。有没有办法设置它，以便在您单击页面上的 ANYWHERE 时关闭菜单？

以下是相关代码：

$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
});

提前致谢！

Answer 1

您可以点击正文：

$('body').click(function() {
    /* close menu */
});

但是然后在您的菜单点击中，您必须防止点击传播到正文。否则菜单会打开，点击会向上传播，菜单会立即关闭。return false;在这里应该足够了：

$('.noty_menu').click(function () {
    $('ul.the_menu').slideToggle('medium');
    return false;
});

（您也可以在处理函数中读取事件参数，例如function(ev) { ... }和 call ev.stopPropagation()）。

您可能还想防止菜单内的点击关闭它：

$('ul.the_menu').click(function () {
    return false;
});

请注意，此解决方案附带一个警告，即停止传播的任何其他单击事件也将阻止菜单关闭。

Answer 2

你可以用

$('body').click(function(){
//ur code
});

去做这个

Answer 3

您可以通过以下方式检查整个文档，但其中包括对菜单的点击（如果您有任何间距，这可能会惹恼用户）：

var menu=$('ul.the_menu');
$(document).on('click',function(){
    if(menu.height>0) {
        menu.slideToggle('medium');
    }
});