jQuery 切换 Cookie [英] jQuery Toggle with Cookie

问题描述

我有以下切换系统，但我希望它记住使用 jQuery cookie 插件打开/关闭的内容.例如，如果我打开一个切换按钮然后离开页面，当我回来时它应该仍然打开.默认情况下，所有切换都应关闭.

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

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 { 日期 = options.expires;} 过期 = ';expires=' + date.toUTCString();无功路径= options.path ?';路径 = = + (options.path) : '';var 域 = options.domain ?';域 = = + (options.domain) : '';var 安全 = options.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));休息;} } } 返回 cookieValue;} };//var showTop = $.cookie('showTop');if ($.cookie('showTop') == 'collapsed') {$(".toggle_container").hide();$(".trigger").toggle(function () {$(this).addClass("active");}， 功能 () {$(this).removeClass("active");});$(".trigger").click(function () {$(this).next(".toggle_container").slideToggle("slow,");});} 别的 {$(".toggle_container").show();$(".trigger").toggle(function () {$(this).addClass("active");}， 功能 () {$(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', '展开');} 别的 {$(this).next(".toggle_container").slideToggle("slow,");$.cookie('showTop', '折叠');}返回假；});

这是它使用的 HTML 片段:

<label for="small"><input type="checkbox" id="small"/>小</label><a class="trigger" href="#">切换</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"/>资金充足</label><a class="trigger" href="#">切换</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">帖子 16</label><input type="text" id="2post16"/></li><li><label for="3teacher">Teacher</label><input type="text" id="3teacher"/></li>

解决方案

您可以将所有代码缩短为这样，应该更简单:

$(".toggle_container").toggle($.cookie('showTop') != 'collapsed');$(".trigger").click(function () {$(this).toggleClass("active").next(".toggle_container").slideToggle("slow,");$.cookie('showTop',$(".toggle_container").is(":hidden") ?'展开' : '折叠');返回假；});

这是一种为每个容器设置 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');});返回假；});

I have the following toggle system, but I want it to remember what was open/closed using the jQuery cookie plugin. So for example if I open a toggle and then navigate away from the page, when I come back it should be still open. By default all Toggles should be closed.

This is code I have so far, but it's becoming rather confusing, some help would be much appreciated thanks.

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;

        });

and this is a snippet of the HTML it works with:

<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>

解决方案

You can shorten all that code down to this, should keep it much simpler:

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

Here's an approach that sets a cookie for each container, all that's necessary is to give each .toggle_container a unique 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;
});​

这篇关于jQuery 切换 Cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！