javascript - jquery/javascript メニューの問題 .siblings() .toggle()

Question

jqueryで3レベルのドロップダウンメニューをコーディングしましたが、トップレベルを折りたたむときを除いてすべてが完全に機能しています.3番目のレベルは折りたたまれません.

level 1
level 2
level 3

折りたたむと、次のようになります。

level 1
level 3

いつ読むべきか：

level1

silbing 関数を使用してこれを実行できることは理解していますが、トグル クラスを使用して、メニューが開いているかどうかに応じて矢印を右向きまたは下向きに変更しているため、問題が発生します。2 つのサブ メニュー レベルを閉じますが、それらを切り替えないため、そのメニューを再度開いたときに、矢印が右を向いているはずなのに、まだ下を向いています。

ここに私の情報源があります：

$(function() {
    $("li.level2").hide();
    $("li.level3").hide();

    $("ul.navigation").delegate(".level1", "click", function() {
        var item=$(this);
        $(this).nextUntil(".level1", ".level2", ".level3").toggle();
        $(this).toggleClass("highlight");
    });

    $("ul.navigation").delegate(".level2", "click", function() {
        var item=$(this);
        $(this).nextUntil(".level2",".level3").toggle();
        $(this).toggleClass("highlight");
    });
}); 

ここでJsfiddle。基本的に緑はレベル 1、オレンジはレベル 2、赤はメニューが開いているときです。「algebra」をクリックしてから「year 11」をクリックすると、2 つのサブメニューが開いて、algebra をもう一度クリックしても、その下のサブメニューは閉じません。 .siblings() を使用するとトグル機能がアクティブにならないため、「algebra」をもう一度クリックして再度開くと、トグルされていないため「11 年」が読み取られます。