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-categories时，它还选择了子元素，恰好是.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.
})

Answer 2

您可以测试点击的项目。

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