4

我已经创建了一个基于 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;
}
4

2 回答 2

3

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

您还需要添加菜单元素

$("body").on("click", ":not(#menu, #menu *)", function (e) {
                            ^^^^^^
于 2013-05-20T18:55:20.720 回答
-1

试试这个

$("body").on("click", function (e) {
     if( e.taget.id !== 'menu' && !$(e.target).closest('#menu').length) {
         $("#menu a").next().slideUp(DROP_DOWN_TIME);
     }
});
于 2013-05-20T18:51:48.727 回答