0

このスクリプトを使用して、展開されたメニュー レベルと折りたたまれたメニュー レベルに関する情報を保存しています。

    $('#menu li:has(ul) a').click(function() {
$(this).next().toggle();
if ($(this).next().is(':visible')) {
    $.cookie($(this).text(), 'expanded');
}

if ($(this).next().is(':hidden')) {
    $.cookie($(this).text(), 'collapsed');
}
});


$('.item').each(function() {
    var verticalNav = $.cookie( $(this).children('a').text() );
    if (verticalNav == 'expanded') {
        $(this).find('ul').show();
    }
});

2 レベル メニューで正常に動作します。例えば：

<ul>
<li>item 1
    <li>item 1.1</li>
</li>

しかし、3番目のレベルを置くと:

<ul>
<li>item 1
    <li>item 1.1
        <li>item 1.1.1</li>
    </li>
</li>

レベル 2 だけクリックすると、ページを更新するとレベル 3 が表示されます。

4

1 に答える 1

1

現在のソリューションでは、完全なリストではなく、最後にクリックされたアイテムのみが保存されることに注意してください。

各アイテムに ID を付けてから、展開されたアイテムの ID の配列を保存することをお勧めします。次に、ページの読み込み時にすべてを折りたたんでから、配列内の項目を展開します。または、折りたたんだアイテムを保存して、すべてを展開した状態から始めます。どちらのデザインでも機能します。すべてのアイテムを繰り返し処理し、毎回テキストを比較すると、アイテムが増えるにつれて遅くなります。

jsfiddleに小さなサンプルをまとめました。

少しやり過ぎて、どのアイテムが展開されているかを追跡するためのオブジェクトを作成しました。Cookie ではなくstore.jsも使用しています。これは個人的な好みです。Cookie を使用するように変更するには、「store.get」または「store.set」を「$.cookie」に置き換えます。

于 2012-08-29T20:06:02.460 に答える