jquery Cookie 设置并获取 div 的扩展状态

Question

我有一个与 this 有关的问题线。我有多个 div，它们是通过 C# 代码动态加载的。我们无法计算需要在网页中显示的面板(每个类别)的数量。它可能是一个或 4 个或 5 个，有时更多。前面的代码按预期正常工作。

现在，我想在回发或页面刷新时保留每个 div 的折叠或展开状态。我尝试使用 jquery cookie，但我们似乎无法设置和获取每个部分的 cookie 状态。

我试过的代码是

jQuery(function ($) {
    var $heads = $(".toggle-container .toggle-header");
    $heads.click(function () {
        var $this = $(this);
        $this.find('i').toggleClass('icon-chevron-sign-down icon-chevron-sign-up');
        $this.next().slideToggle("slow");
        if ($this.next().is(':visible')) {
            $.cookie('expanded', 'true');
        } else {
            $.cookie('expanded', 'false');
        }
    });
    var cookieValue = $.cookie("expanded");
    if (cookieValue === "true") {
        $heads.next().show();
    } else {
        $heads.next().hide();
    }
});

JsFiddle Playground :http://jsfiddle.net/ravimallya/qL79j/

更新:

我也试过这个:http://jsfiddle.net/ravimallya/qL79j/7/ .除了这个，我无法更改标记。

有人可以试试吗？提前致谢。

Answer 1

为所有 block 设置 ID 并根据 ID 创建 cookie。像这样:

Working DEMO

$('.block').click(function(){
    if ( $(this).find('.outer').css('display') == 'block' )
    {
        $(this).find('.outer').slideUp('normal');
        $.cookie($(this).attr('id'), 'hide');

    }
    else
    {
        $(this).find('.outer').slideDown('slow');
        var tab_cookie = $.cookie($(this).attr('id'));

        if ( tab_cookie == 'hide' )
        {
            $.cookie($(this).attr('id'), 'show');
        }
    }
});

然后使用这段代码:

$(document).ready(function(){
    $('.block').each(function(){
        var block =$(this).attr('id');
        if ( $.cookie(block) == 'hide' )
        {
            $(this).find('.outer').hide();
        }
    });
});

---

更新

在您的情况下使用此代码:

Working DEMO

jQuery(function ($) {
    $('.toggle-container').each(function () {
        var block = $(this).attr('id');
        if ($.cookie(block) == 'hide') {
            $(this).find('.toggle-content').hide();
        }
        else {
            $(this).find('.toggle-content').show();  /* show visible element  */
        }
    });
    $('.toggle-header').click(function () {
        if ($(this).next().css('display') == 'block') {
            $(this).next().slideUp('normal');
            $.cookie($(this).parent().attr('id'), 'hide');

        } else {
            $(this).next().slideDown('slow');
            var tab_cookie = $.cookie($(this).parent().attr('id')); /*  missed parent() here */
            if (tab_cookie == 'hide') { 
                $.cookie($(this).parent().attr('id'), 'show');
            }
        }
    });
});