jquery 单击页面上的任意位置时JavaScript隐藏元素

w1jd8yoj 于 2022-11-29 发布在 jQuery

关注(0)|答案(3)|浏览(165)

我有一个滑动JS菜单，当你点击noty_menu链接时，它会打开，然后当你再次点击该链接时，它会关闭。有没有办法设置它，使菜单在你点击页面上的ANYWHERE时关闭？
下面是相关代码：

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

3条答案

你可以捕捉到身体上的一点：

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

但是在你的菜单点击中，你必须防止点击向上传播到身体。否则菜单会打开，点击会向上传播，菜单会立即关闭。return false;应该足够了：

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

(You也可以将事件参数读入处理函数（如function(ev) { ... }）并调用ev.stopPropagation()）。
您可能还希望防止在菜单内单击以关闭菜单：

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

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

u可以使用

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

要执行此操作

您可以检查整个文档，但包括单击菜单（如果您有任何空格，这可能会惹恼用户），如下所示：

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