0

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;  
}

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

4

1 に答える 1

2

あなたはほとんどすべてが正しく行われていますが、多くの余分なものを書いているだけです:)

$(function(){
    if($.cookie('submin_visible') == 'true') {
        $('#sub-nav-wrapmin').show();
        $('#sub-nav-wrap').hide();
    } else {
        $('#sub-nav-wrapmin').hide();
        $('#sub-nav-wrap').show();
    }

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

        var isVisible = $('#sub-nav-wrapmin').is(':visible').toString();
        $.cookie('submin_visible', isVisible);
    });
});
于 2012-07-29T15:05:41.657 に答える