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所做的是在通过单击打开子菜单时创建叠加/模态效果。我用不同的类和覆盖 ID 重复了几次代码，因此是最后一行代码（需要以便一次只显示一个覆盖）。对于像我这样的初学者来说，这是最快，最简单的方法，但这不是主题。

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

我想我需要使用 .not（） 函数，但无法弄清楚。

你们能帮我解决这个问题吗？ 如果可能的话，编写代码，以便我可以尝试一下

谢谢！

Answer 1

您可以尝试向始终返回 false 的子项添加第二个单击处理程序。这样，点击就不会向上传播和关闭：

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

<</div> div class="one_answers">

您可以测试单击的项目。

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