我使用 jQuery 切换功能进行导航。 默认情况下,“作者”开关是可见的,“文件”开关是关闭的。
我的问题是,当用户切换到另一个页面时,切换按钮会自行重置。
例如,当用户关闭“作者”开关并打开“存档”开关,然后导航到另一个页面时,将加载默认设置。
我读到可以通过 cookie 存储设置,但我对 jQuery 完全陌生,如果有人能帮助我那就太好了!
HTML
<div id="authors" class="widget">
<h2 class="widget-title-visible">Authors</h2>
<div class="toggle">
<div class="submenu">
<ul>
<li>Name 1</li>
<li>Name 2</li>
<li>Name 3</li>
<li>Name 3</li>
</ul>
</div>
</div>
<div id="archives" class="widget">
<h2 class="widget-title">Archiv</h2>
<div class="toggle hidden">
<div class="submenu">
<ul>
<li>November 2012</li>
<li>Oktober 2012</li>
</ul>
</div>
</div>
</div>
jQuery
function toggleWidgets() {
jQuery('.widget-title').addClass('plus');
jQuery('.widget-title-visible').addClass('minus');
jQuery('.widget-title').click(function() {
$(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
});
jQuery('.widget-title-visible').click(function() {
$(this).toggleClass('minus').toggleClass('plus').next().toggle(180);
});
}
jQuery(document).ready(function() {
toggleWidgets();
} )
CSS
.hidden{
display:none;
}
.plus {
background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat;
padding: 0 0 0 12px;
}
.minus {
background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat;
padding: 0 0 0 12px;
}
最佳答案
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEq = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ')
c = c.substring(1, c.length);
if (c.indexOf(nameEq) == 0)
return c.substring(nameEq.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
以下是读取/写入 cookie 的函数。您可以根据需要保留设置:)
如果您想切换两个 div 的可见性,只需使用 div 的“id”作为 cookie 名称,并根据其可见与否将其保存在 cookie 中“true”或“false”。
当您单击 div 时,获取它的“id”和可见性
var divId = $(this).attr("id");
var visible = false;
if($(this).isVisible())
visible = true;
createCookie(divId, visible, 1);
当您重新加载页面时
var visibleAuthors = readCookie("authors");
var visibleArchives = readCookie("archives")
加载页面时解析cookie的结果,然后显示你想要的div
关于jquery - 切换缓存/cookie,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13214338/