在页面刷新视图后使用cookie.js保持div上的切换状态jsFiddle

Question

我有一个简单的代码，它允许我在两个包含两个子导航（＃sub-nav-wrap是替代导航）的div之间切换。它们固定在浏览器的底部：

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

这是我第一次问，我一直令人头大我的大脑得到这个使用其他类似的工作代码从这个网站，但没有任何工作。 希望得到任何帮助......

大卫

我已经建立了一个jsFiddle显示导航是如何工作没有一个cookie。 This是我尝试使用cookie。我希望它是简单的东西，我只是想知道...

Answer 1

您需要jQuery cookie plugin才能在jQuery中使用cookie。 jQuery中没有原生支持你正在尝试做的事情。

如果旧的浏览器are'nt一个问题，你可以使用本地存储和执行类似：

$(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为好，现在也不会，如果元件正常工作最初显示。

FIDDLE

该Cookie插件是有据可查的。 您通过给它一个名称和值来设置cookie，即。两个值，而不是一个：

$.cookie('the_cookie', 'the_value'); 

Answer 2

有一件事我注意到的是，jQuery.cookie是不存在的小提琴，但我假设你有一个对任何情况下的实际网站。 Here你走了。我相信有更有效的方法，但这仍然有效。