为什么jQuery无法匹配":not(#menu *)"

Why does jQuery fail to match ":not(#menu *)"

本文关键字：quot not #menu jQuery 为什么      更新时间：2023-09-26

我设计了一个基于Javascript的导航栏(我希望它是点击式的，而不是悬停式的，以方便移动设备)。我已经尝试使HTML, CSS和Javascript尽可能简单。

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

我希望下面的匹配器只匹配顶层菜单元素的后代项。如果你能告诉我为什么这样不行，我将不胜感激。

编辑:我明白你可以使用任意函数来评估即将出现的气泡，并决定是否应该对其采取行动，但我更感兴趣的是为什么下面的。on()选择器没有按我期望的方式工作。

$("body").on("click", ":not(#menu *)", function (e) {
            $("#menu a").next().slideUp(DROP_DOWN_TIME);
        });
http://jsfiddle.net/auKzt/16/

HTML 

<body>
    <div>HEADER</div>
    <ul id="menu" class="cf">
        <li><a href="#">FooafsdasiuhfauhfuahsdfFooaf sdasiuhfauhfuahsdfFooafsdasiuhfauhfuahsdf</a>
            <ul>
                <li><a href="#">Subitem asdasdasd 1 sadad</a>
                </li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
            </ul>
        </li>
        <li><a href="#">Bar</a>
            <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
            </ul>
        </li>
        <li>Qux</li>
    </ul>
    <div>CONTENT</div>
    <div>FOOTER</div>
</body>
JAVASCRIPT 

$(document).ready(function () {
    var DROP_DOWN_TIME = 200;
    //Setup hidden dropdowns
    $("#menu > li > a").next().toggle();
    //Hide or unhide dropdowns onclick
    $("#menu > li > a").click(function (e) {
        $("#menu a").next().not($(e.target).next()).slideUp(DROP_DOWN_TIME);
        $(e.target).next().slideToggle(DROP_DOWN_TIME);
        e.stopPropagation();
    });
    $("body").on("click", ":not(#menu *)", function (e) {
        $("#menu a").next().slideUp(DROP_DOWN_TIME);
    });
});
CSS 

#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", ":not(#menu, #menu *)", function (e) {
                            ^^^^^^

试试这个

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