1

2 つのサブ ナビゲーションのラップである 2 つの div を切り替えることができる単純なコードがあります (#sub-nav-wrap は別のナビゲーションです)。それらはブラウザの下部に固定されています:

$(function(){
$('.button').click(function(){
    $('#sub-nav-wrapmin').toggle();
    $('#sub-nav-wrap').toggle();
});

});

私がやりたいことは、ページの更新後にユーザーが選択したのと同じ各 div の状態を維持することです。新しいサブヘッダーをクリックしても、デフォルトの状態に頼るのではなく、メニューは同じままです。

html は次のとおりです。

<!--- Main Sub Wrap --->
<div id="bottom-wrap">
<!-- Mini Sub Nav -->

<div id="sub-nav-wrapmin" class="snWrap divone">
        <div id="sn-contentmin">
            <div id="sn-likemin"></div> 
            <div id="sn-coffeesml"></div>
            <div id="sn-sharemin"></div>
            <div id="sn-commentsml"></div>
            <div id="toggle-barmin">
                    <div id="sn-sidebrdrmin"></div>
                    <div class="sn-toggle button"></div>
           </div>
              <ul class="sn-comicsmin menu">
                <li><a class="sn-comics" style="background-position: right top" href="#comic.html">Comic</a></li>
                <li><a class="sn-archive" href="#archive.html">Archive</a></li>
                <li><a class="sn-vote" href="#vote.html">Vote</a></li>
                <li><a class="sn-spotlight" href="#spotlight.html">Spotlight</a></li>
            </ul>
      </div>
</div>
<!-- Sub Nav -->
<div id="sub-nav-wrap" class="snWrap divtwo">
    <div id="sub-nav-container">
         <div id="sub-nav-content">

                <div id="sn-bnrlft"></div>
                <div id="sn-bnrrgt"></div>
                <div class="sn-dividelft"></div>
                <div class="sn-dividergt"></div>
                <div id="sn-likebg"></div>
                <div id="sn-coffeebtn">
                </div>
                <div id="sn-sharebtn"></div>
                <div id="sn-commentbtn"></div>    
                <div id="toggle-bar">
                    <div id="sn-sidebrdr"></div>
                    <div class="toggle button"></div>
                </div>            
        </div>
        <div id="sub-nav-brdr">
            <ul class="sub-nav-comics menu">
                <li><a class="comics" style="background-position: right top" href="#comic.html">Comic</a></li>
                <li><a class="archive" href="#archive.html">Archive</a></li>
                <li><a class="vote" href="#vote.html">Vote</a></li>
                <li><a class="spotlight" href="#spotlight.html">Spotlight</a></li>
            </ul>
        </div>
    </div>
</div>

CSS は次のとおりです。

#sub-nav-wrap {
    display: none;  
}

これは私の初めての質問であり、このサイトの他の同様のコードを使用してこれを機能させるために頭を悩ませてきましたが、何も機能していません. 助けていただければ幸いです...

デビッド

Cookie なしでナビゲーションがどのように機能するかを示すために 、jsFiddleを作成しました。これは、Cookie を使用した私の試みです。それが単純なものであることを願っていますが、理解できていないだけです...

4

2 に答える 2

1

jQuery でそのように Cookie を使用するには、jQuery Cookieプラグインが必要です。あなたがやろうとしていることに対するjQueryのネイティブサポートはありません。

古いブラウザーが問題にならない場合は、ローカル ストレージを使用して次のようなことを行うことができます。

$(function(){
    var wrapmin = localStorage.getItem('wrapmin')||false,
        wrap = localStorage.getItem('wrap')||false;

    if (wrapmin) $('#sub-nav-wrapmin').show();
    if (wrap) $('#sub-nav-wrap').show();

    $('.button').click(function(){
        $('#sub-nav-wrapmin').toggle();
        $('#sub-nav-wrap').toggle();
        wrapmin = $('#sub-nav-wrapmin').is(':visible');
        wrap = $('#sub-nav-wrap').is(':visible');
        localStorage.setItem('wrapmin', wrapmin),
        localStorage.setItem('wrap', wrap);
    });    
});

CSS も変更する必要があります。現時点では、要素が最初に表示されていると正しく動作しません。

フィドル

Cookie プラグインは十分に文書化されています。名前と値を指定して Cookie を設定します。1 つではなく 2 つの値:

$.cookie('the_cookie', 'the_value');
于 2012-07-28T18:58:20.803 に答える
1

私が気づいたことの 1 つは、フィドルに jQuery.cookie が存在しないことでしたが、いずれにしても実際のサイトにはあると思います。どうぞ。もっと効率的な方法があると確信していますが、これはまだ機能します。

于 2012-07-28T22:59:52.573 に答える