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) { ... }并调用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');
    }
});