javascript - jquery .not() 用于关闭菜单(或模式)不起作用

Question

我有一个菜单，可以通过单击按钮来切换打开状态。我还被要求在您单击打开的菜单之外时将其关闭。

这实际上与“单击模式外部以将其关闭”行为相同，但应用于固定的菜单标题。

我想到了这样的事情:

$('*').not('.header').on('click', function(){
        //close menu function
    console.log("close the menu")
});

但它在很多方面都不起作用:

1) 无论我点击哪里，console.log 都会触发2) 每次点击，我都会触发 3 个 console.log。

这是一个 fiddle :https://jsfiddle.net/Ln1wabqq/1/

我尝试将 $('*') 更改为

• $('*:not(".header")')
• $('*').not('.header, .header *')
• $('').not('.header')

但我得到了完全相同的输出。我在这里走的是完全错误的道路吗？

非常感谢您的帮助

Answer 1

您可以检测到元素外部的点击，如下所示:

$(document).click(function(event) { 
    if(!$(event.target).closest('.header').length){
        // click outside .header
    }
});