4

私は Javascript ベースのナビゲーション バーを自作しました (モバイル フレンドリーにするためにホバーではなくクリックにしたいのです)。HTML、CSS、Javascript をできるだけシンプルにしようとしました。

Web サイトの他の場所をクリックするとメニュー バーが閉じるように、body にリスナーを配置しました。メニューバーのどの部分をクリックしてもリスナーが起動しないように、リスナーをフィルタリングしようとしています。これは、ドロップダウン内の要素をクリックしたときにドロップダウンが元に戻らないようにするためです。

以下のマッチャーは、最上位のメニュー要素の子孫であるアイテムのみに一致することを期待しています。これが機能しない理由についてのアドバイスは大歓迎です。

編集: 任意の関数を使用してバブルの発生を評価し、それに対して行動する必要があるかどうかを判断できることは理解していますが、以下の .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>

ジャバスクリプト

$(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 に答える