带Cookie的jQuery切换
我有以下切换系统,但我希望它记住使用jQuery cookie插件打开/关闭的内容。例如,如果我打开一个切换,然后离开页面,当我回来时,它应该仍然是打开的。默认情况下,应关闭所有切换 这是我到目前为止的代码,但它变得相当混乱,一些帮助将不胜感激谢谢带Cookie的jQuery切换,jquery,cookies,toggle,Jquery,Cookies,Toggle,我有以下切换系统,但我希望它记住使用jQuery cookie插件打开/关闭的内容。例如,如果我打开一个切换,然后离开页面,当我回来时,它应该仍然是打开的。默认情况下,应关闭所有切换 这是我到目前为止的代码,但它变得相当混乱,一些帮助将不胜感激谢谢 jQuery.cookie = function (name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === n
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;
});
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.toutstring)){var-date(typeof options.expires=='number'){date=new date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;}expires='+date.toutString();}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
这是它使用的HTML的一个片段:
<li>
<label for="small"><input type="checkbox" id="small" /> Small</label>
<a class="trigger" href="#">Toggle</a>
<div class="toggle_container">
<p class="funding"><strong>Funding</strong></p>
<ul class="childs">
<li class="child">
<label for="fully-funded1"><input type="checkbox" id="fully-funded1" /> Fully Funded</label>
<a class="trigger" href="#">Toggle</a>
<div class="toggle_container">
<p class="days"><strong>Days</strong></p>
<ul class="days clearfix">
<li><label for="1pre16">Pre 16</label> <input type="text" id="1pre16" /></li>
<li><label for="2post16">Post 16</label> <input type="text" id="2post16" /></li>
<li><label for="3teacher">Teacher</label> <input type="text" id="3teacher" /></li>
</ul>
</div>
</li>
小的
资金
-
资金充足
天
- 16岁之前
- 第16页
- 老师
您可以将所有代码缩短为以下内容,并应使其更加简单:
$(".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\u 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;
});
好的,这是我的代码: 注释出来的东西运行良好,但没有与唯一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
<li>
<input id="MC_ctl00_RPS_chkItem_1" type="checkbox" name="ctl00$MC$ctl00$RPS$ctl01$chkItem" />
<label for="MC_ctl00_RPS_chkItem_1" id="MC_ctl00_RPS_lbl_1">Medium</label>
<a class="trigger" href="#">Toggle</a>
<div class="toggle_container" id="divFund">
<p class="funding"><strong>Funding</strong></p>
<ul class="childs">
<li class="child">
<input id="MC_ctl00_RPS_RPF_1_chkItem_0" type="checkbox" name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$chkItem" />
<label for="MC_ctl00_RPS_RPF_1_chkItem_0" id="MC_ctl00_RPS_RPF_1_lbl_0">Fully Funded</label>
<a class="trigger" href="#">Toggle</a>
<div class="toggle_container" id="divDays">
<p class="days"><strong>Days</strong></p>
<ul class="days clearfix">
<li>
<label for="MC_ctl00_RPS_RPF_1_txtPre16_0" id="MC_ctl00_RPS_RPF_1_lblPre16_0">Pre 16</label>
<input name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$txtPre16" type="text" id="MC_ctl00_RPS_RPF_1_txtPre16_0" />
</li>
<li>
<label for="MC_ctl00_RPS_RPF_1_txtPost16_0" id="MC_ctl00_RPS_RPF_1_Label1_0">Post 16</label>
<input name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$txtPost16" type="text" id="MC_ctl00_RPS_RPF_1_txtPost16_0" />
</li>
<li>
<label for="MC_ctl00_RPS_RPF_1_txtTeacher_0" id="MC_ctl00_RPS_RPF_1_Label2_0">Teacher</label>
<input name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$txtTeacher" type="text" id="MC_ctl00_RPS_RPF_1_txtTeacher_0" />
</li>
</ul>
</div>
</li>
中等
资金
-
资金充足
天
-
16岁以前
-
16号岗位
-
老师
它工作不正常。默认情况下,所有的开关都是打开的,它不记得哪个开关是打开/关闭的。并且它不再显示正确的按钮