jQuery用Cookie切换

我有以下切换系统，但我想让它记住使用jQuery cookie插件打开/关闭的内容。 因此，例如，如果我打开一个切换然后离开页面，当我回来时它应该仍然是打开的。 默认情况下，应关闭所有Toggles。

这是我到目前为止的代码，但它变得相当混乱，一些帮助将非常感谢谢谢。

jQuery.cookie = function (name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } }; // var showTop = $.cookie('showTop'); if ($.cookie('showTop') == 'collapsed') { $(".toggle_container").hide(); $(".trigger").toggle(function () { $(this).addClass("active"); }, function () { $(this).removeClass("active"); }); $(".trigger").click(function () { $(this).next(".toggle_container").slideToggle("slow,"); }); } else { $(".toggle_container").show(); $(".trigger").toggle(function () { $(this).addClass("active"); }, function () { $(this).removeClass("active"); }); $(".trigger").click(function () { $(this).next(".toggle_container").slideToggle("slow,"); }); }; $(".trigger").click(function () { if ($(".toggle_container").is(":hidden")) { $(this).next(".toggle_container").slideToggle("slow,"); $.cookie('showTop', 'expanded'); } else { $(this).next(".toggle_container").slideToggle("slow,"); $.cookie('showTop', 'collapsed'); } return false; }); 

这是它使用的HTML的片段：

 
  Small Toggle 
 
Funding
 
 
  Fully Funded Toggle 
 
Days
 
 
Pre 16 
 
Post 16 
 
Teacher 
 
 
  

Answer 1

您可以将所有代码缩短到此，应该更简单：

 $(".toggle_container").toggle($.cookie('showTop') != 'collapsed'); $(".trigger").click(function () { $(this).toggleClass("active").next(".toggle_container").slideToggle("slow,"); $.cookie('showTop', $(".toggle_container").is(":hidden") ? 'expanded' : 'collapsed'); return false; }); 

这是为每个容器设置cookie的方法，所有必要的是为每个.toggle_container一个唯一的ID：

 $(".toggle_container").each(function() { $(this).toggle($.cookie('show-' + this.id) != 'collapsed'); }); $(".trigger").click(function () { var tc = $(this).toggleClass("active").next(".toggle_container").slideToggle("slow", function() { $.cookie('show-' + $(this).attr("id"), $(this).is(":hidden") ? 'collapsed' : 'expanded'); }); return false; });​ 

Answer 2

好的，这是我的代码：

评论出来的东西运行良好，但没有与独特的ID交谈。 上面的代码不起作用。

 $(document).ready(function () { $(".toggle_container").each(function() { $(this).toggle($.cookie('show-' + this.id) != 'collapsed'); }); $(".trigger").click(function () { var tc = $(this).toggleClass("active").next(".toggle_container").slideToggle("slow", function() { $.cookie('show-' + $(this).attr("id"), $(this).is(":hidden") ? 'collapsed' : 'expanded'); }); return false; });​ //$(".toggle_container").toggle($.cookie('showTop') != 'collapsed'); /*$(".trigger").click(function () { $(this).toggleClass("active").next(".toggle_container").slideToggle("slow,"); $.cookie('showTop', $(".toggle_container").is(":hidden") ? 'expanded' : 'collapsed'); return false; });*/ }); 

这是HTML

  
  Medium Toggle 
 
Funding
 
 
  Fully Funded Toggle 
 
Days
 
 
 Pre 16  
 
 Post 16  
 
 Teacher