jQuery与Cookie切换

前端之家收集整理的这篇文章主要介绍了jQuery与Cookie切换 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有以下切换系统,但我想让它记住使用jQuery cookie插件打开/关闭内容.因此,例如,如果我打开一个切换开关然后离开页面导航,那么当我回来时它应该仍然处于打开状态.默认情况下,所有切换都应关闭.

到目前为止,这是我的代码,但现在变得相当混乱,感谢您的帮助.

@H_403_7@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"); },"); }); }; $(".trigger").click(function () { if ($(".toggle_container").is(":hidden")) { $(this).next(".toggle_container").slideToggle("slow,"); $.cookie('showTop','expanded'); } else { $(this).next(".toggle_container").slideToggle("slow,'collapsed'); } return false; });

这是其可使用的HTML的摘要

@H_403_7@<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>
最佳答案
您可以将所有代码简化为这样,应使其更简单:

@H_403_7@$(".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:

@H_403_7@$(".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; });​

猜你在找的jQuery相关文章