4

メニュー用に次の JS コードがあります。

$(document).ready(function () {
  $('#nav > li > a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#nav li ul').slideUp();
       $(this).next().slideToggle();
       $('#nav li a').removeClass('active');
       $(this).addClass('active');
     }
  });
});

ページが変更されたときにサブメニューを開いたままにする最良の方法は何ですか?おそらくCookieまたはセッションを使用していますか?

ここで jsfiddle を作成したので、完全な html と css などを見ることができます: http://jsfiddle.net/bMkEj/

4

3 に答える 3

2

HTML5 LocalStorageを使用して実行できます。

クリック ハンドラーで、アクティブなメニュー テキストを localStorage に保存します。

$('#nav > li > a').click(function(e){
   ...
   localStorage.setItem("activeSubMenu", $(this).text());
});

ページの読み込み時に、localStorage を読み取り、メニューを展開します (見つかった場合)。

$(document).ready(function(){
    var activeItem = localStorage.getItem("activeSubMenu");
    if(activeItem){
        $('#nav > li > a').filter(function() {
            return $(this).text() == activeItem;
        }).slideToggle();
    }
});
于 2013-06-19T13:41:09.557 に答える
1

ページを読み込むときにクエリ パラメータを渡し、それを使用して適切なナビゲーション アイテムを選択します。

HTML

<ul>
    <li id="foo"><a href="index.html?nav=foo">Foo</a>
        <ul>
            <li>Foo 1</li>
            <li>Foo 2</li>
        </ul>
    </li>
    <li id="bar"><a href="index.html?nav=bar">Bar</a>
        <ul>
            <li>Bar 1</li>
            <li>Bar 2</li>
        </ul>
    </li>
    <li id="baz"><a href="index.html?nav=baz">Baz</a>
        <ul>
            <li>Baz 1</li>
            <li>Baz 2</li>
        </ul>
    </li>
</ul>

JS (jQuery を想定)

$(document).ready(function() {
    var query = decodeURIComponent(window.location.search);
    var matches = query.match(/nav=([^&]*)/);
    var id = matches[1];
    $('#' + id + ' ul').slideDown();
});
于 2013-06-19T16:39:23.220 に答える
0

PHP またはその他のサーバーエンド言語を実行している場合は、active クラスを active 要素に追加できます。

編集: JS を実行しているだけの場合は、URL (window.location.href) を解析し、それを使用してアクティブなクラスを設定できる場合があります。

于 2013-06-19T13:28:00.710 に答える