Javascript在页面上单击任意位置时隐藏元素

I have a sliding JS menu that opens when you click the "noty_menu" link, then closes when you click that link again. Is there a way to set it so that the menu closes when you click ANYWHERE on the page?

我有一个滑动的JS菜单,当你点击“noty_menu”链接时会打开,然后当你再次点击该链接时关闭。有没有办法设置它,以便当您单击页面上的任何地方时菜单关闭?

Here's the relevant code:

这是相关的代码:

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

Thanks in advance!

提前致谢!

3 个解决方案

#1

You could catch a click on the body:

你可以点击身体:

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

But then in your menu click you have to prevent propagation of the click up to body. Otherwise the menu will open, the click will propagate up, and the menu will immediately close. return false; should suffice here:

但是,在菜单中单击,您必须防止将点击传播到正文。否则菜单将打开,点击将向上传播,菜单将立即关闭。返回虚假;应该在这里足够:

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

(You could also read in the event argument to the handler function like function(ev) { ... } and call ev.stopPropagation()).

(您还可以在函数(ev){...}中读取处理函数的事件参数,并调用ev.stopPropagation())。

You may also want to prevent clicks inside the menu from closing it:

您可能还希望阻止菜单中的点击关闭它:

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

Note that this solution comes with a caveat that any other click event that stops propagation will also prevent the menu close.

请注意,此解决方案需要注意,任何其他停止传播的点击事件也会阻止菜单关闭。

#2

u can use

你可以用

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

to do this

去做这个

#3

You can check the entire document, however that includes clicks on the menu (if you have any spacing, this could annoy the user) by something like this:

您可以查看整个文档,但是这包括菜单上的点击(如果您有任何间距,这可能会惹恼用户),请执行以下操作:

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

#1