1

要素をクリックすると表示される「ドロップダウン メニュー」を HTML で作成しました。要素をクリックすると、「選択された」クラスが適用されli、サブメニューが表示されます。

jsFiddle の例

メニュー項目をクリックしたときにメニューを表示/非表示にするコードがあります。別のメニューが選択されている場合、選択されたクラスがそこから削除され、クリックされたクラスに切り替えられます。

$("#menu").on("click", "li.dropdown", function(event) {
    event.preventDefault();
    event.stopPropagation();

    $(this).siblings(".dropdown").removeClass("selected");
    $(this).toggleClass("selected");
});

問題は、サブメニュー内の子をクリックすると、メニューが切り替わり、メニューが閉じられるということです。

また、ドキュメント内の他の場所をクリックしたときにメニューを非表示にしたいと考えています。これは、次の方法で実現できます。

$(document).on("click", function(event) {
    $("#menu .dropdown").removeClass("selected");
});

1) ドロップダウン部分をクリックしたときにメニューを非表示にせずに、このトグル機能を有効にするにはどうすればよいですか?

2) ドキュメントのメニュー/サブメニュー以外の場所をクリックしたときにメニューを非表示にするにはどうすればよいですか?

4

1 に答える 1

3

あなたは許容できる方法で答え＃2を持っているようです。行うには #1:

$('.submenu').click(function(e) {
    e.stopPropagation();
});​

jsFiddle の例

于 2012-12-17T22:20:16.860 に答える