Jquery单击函数排除子函数

Question

嘿，我想弄清楚这件事。

JS

$('.jrm-menu-categories,#overlay-2').click(function() {
           $('#overlay-2').toggle();
           $('#overlay-3').hide();
});

HTML

<ul id="megaUber" class="megaMenu">
    <li id="menu-item-1459" class="jrm-menu-categories">
        <ul class="sub-menu sub-menu-1">

因此，基本上，我的JS所做的是创建一个覆盖/模态的效果，当一个子菜单打开通过点击。我用不同的类和覆盖I重复了几次代码，这就是最后一行代码(需要这样一次只显示一个覆盖)。对于像我这样的初学者来说，最快也是最简单的方法，但这不是主题。

当子菜单打开，用户单击子菜单中的任意位置时，它将切换覆盖层。我假设这是因为当我在JS中选择..jrm菜单-类别时，它也选择了子元素，这些子元素恰好是.子菜单

我认为我需要使用.not()函数，但无法理解。

你们能帮我吗？如果可能的话，写代码，这样我就可以试一试了

谢谢!

Answer 1

您可以尝试将第二个单击处理程序添加到将始终返回false的子级。这样，单击就不会传播和取消：

$('.jrm-menu-categories').children('.sub-menu').click(function (e) {
    e.stopPropagation(); // prevent click propagation, so parent click never fires.
})

Answer 2

您可以测试单击的项。

$('.jrm-menu-categories,#overlay-2').click(function(e) {
    if (this == e.target){
           $('#overlay-2').toggle();
           $('#overlay-3').hide();
    }
});