Javascript 为什么jQuery无法匹配"；：不是（“菜单*）”；

我已经自制了一个基于Javascript的导航栏（我希望它是点击的，而不是移动友好的悬停）。我试图使HTML、CSS和Javascript尽可能简单

我在身体上放了一个监听器，如果你点击网站上的其他地方，它会关闭菜单栏。我正在尝试过滤侦听器，以便在单击菜单栏的任何部分时不会触发它。这是为了防止在单击下拉列表中的元素时下拉列表回滚

我希望下面的匹配器只匹配顶级菜单元素的后代项。如果您能提供任何建议，解释为什么这样做不起作用，我们将不胜感激

编辑：我知道您可以使用任意函数来计算即将出现的气泡，并决定是否对其采取行动，但我更感兴趣的是，为什么下面的.on（）选择器没有按我预期的方式工作

$("body").on("click", ":not(#menu *)", function (e) {
            $("#menu a").next().slideUp(DROP_DOWN_TIME);
        });

HTML

CSS

试试这个

$("body").on("click", function (e) {
     if( e.taget.id !== 'menu' && !$(e.target).closest('#menu').length) {
         $("#menu a").next().slideUp(DROP_DOWN_TIME);
     }
});

---

它失败是因为在菜单元素上捕捉到了单击。里面的内容正在被捕获

您还需要添加菜单元素

$("body").on("click", ":not(#menu, #menu *)", function (e) {
                            ^^^^^^   

---

我试图巧妙地使用.on（）的选择器功能。事实上，我很有兴趣知道为什么它不能按我期望的方式工作。我知道我可以使用任意函数来过滤气泡，但我希望得到“更干净”的东西。你没有指定选择器。。而且：not仅仅是一个过滤器，那么您希望从这个

：not（#menu*）

@wirey它是一个选择器。它返回与内部内容不匹配的所有元素@Jazzepi-但它不能用作这样的委托事件处理程序的筛选器。@adeneo您不正确。检查epascarello提供的解决方案。正如预期的那样。@adeneo我同意其他选项更好，我更愿意使用它们，只是你说它们不能使用，但它们显然可以。此外，OP或多或少地询问它为什么不起作用，而不是寻找替代方案（尽管更好）。至于效率，我也不知道：）赢家鸡肉晚餐。感谢您回答实际问题：）

#menu {
    width: 900px;
    padding: 0;
    margin: 0;
}
/* Top level menu container */
 #menu li {
    background-color: aqua;
    border: 1px solid black;
    padding: 2px;
}
/* Top level menu items */
 #menu > li {
    display: inline-block;
    float: left;
    position: relative;
}
/* Submenu container */
 #menu > li > ul {
    position:absolute;
    padding: 0;
    margin: 0;
    top: 100%;
    left: -1px;
}
/* Submenu Items */
 #menu > li > ul > li {
    display: block;
    float: none;
    white-space: nowrap;
}
.cf:before, .cf:after {
    content:" ";
    /* 1 */
    display: table;
    /* 2 */
}
.cf:after {
    clear: both;
}

$("body").on("click", function (e) {
     if( e.taget.id !== 'menu' && !$(e.target).closest('#menu').length) {
         $("#menu a").next().slideUp(DROP_DOWN_TIME);
     }
});

$("body").on("click", ":not(#menu, #menu *)", function (e) {
                            ^^^^^^