1

ドロップダウン メニューがあり、クリックすると jQuery を使用してクラスを切り替えます。をクリックする<a>と、その親<li>がアクティブになり、css を使用してサブメニューが表示されます。私の問題は、ここの目的は、すでに開いているサブメニューRemoveClassのクラスを削除することです。active

問題は、もう一度クリックする<a>と、現在のサブメニューが閉じられないことです。つまり、トグルしていないように見え、クラスを追加するだけです。

$("#pop-out-left ul li a").click(function () {
    $("#pop-out-left ul li").removeClass("active");
    $(this).parent().toggleClass("active");

    });

これがCSSです..

#pop-out-left > ul > li.active > a + ul {
display: block;
}
4

1 に答える 1

1

これは、次のコードを使用して、すべてのタグのactiveクラスを削除することから始めるためです。li

$("#pop-out-left ul li").removeClass("active");

そして、切り替えると、クラスが再び追加されます。これは、2 回目のクリックで最初のケースが繰り返されることを意味します。

これを解決するには、上記のステートメントを変更して、クリックされた項目を除外します。次のようにします。

$("#pop-out-left ul li a").click(function () {
    $("#pop-out-left ul li")
        .not($(this).parent())
        .removeClass("active");
    $(this).parent().toggleClass("active");
});

ここに実用的なフィドルがあります：jsfiddle.net/dDhYu

于 2013-03-08T09:44:16.820 に答える