首页 > 编程语言> > javascript – 为什么jQuery无法匹配“：not(#menu *)”

javascript – 为什么jQuery无法匹配“：not(#menu *)”

2019-07-03 19:23:51 作者：互联网

我已经预订了一个基于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) {
                            ^^^^^^

标签：jquery,javascript,event-bubbling
来源： https://codeday.me/bug/20190703/1369764.html