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

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

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

}）;

我希望做的是在页面刷新后保持每个div的状态与用户选择的相同，即使菜单上的新子标题的点击将保持不变，而不是采用默认状态。

HTML是这样的：

  
  
 
 
 
 
 
 
 
 
 
 
 
Comic
 
Archive
 
Vote
 
Spotlight
 
 
 
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Comic
 
Archive
 
Vote
 
Spotlight
 
 
 
  

CSS是这样的：

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

这是我第一次询问，而且我一直在绞尽脑汁使用本网站的其他类似代码来解决这个问题，但没有任何工作。 非常感谢任何帮助……

大卫

我已经构建了一个jsFiddle来显示导航如何在没有cookie的情况下工作。 这是我尝试使用cookies。 我希望这很简单，我很想念……

Answer 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，即。 两个值，而不是一个：

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

Answer 2

我注意到的一件事是jQuery.cookie不存在于小提琴中，但我认为无论如何你在实际网站上都有。 你去吧 我相信有更有效的方法，但这仍然有效。