jquery Cookie设置并获得div的扩展状态 [英] jquery Cookie set and get expanded status of divs

问题描述

我有一个与此线程相关的问题。我有多个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 / 。我不能改变这个标记。

任何人都可以试一试吗？

解决方案

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

工作DEMO 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'）;
}
}
}）;

然后使用以下代码：

<$ p $ （函数（）。$ b $（'。block'）。each（function（）{
var block = $（this）.attr （'id'）;
if（$ .cookie（block）=='hide'）
{
$（this）.find（'。outer'）。hide（）;
}
}）;
}）;

---

更新 h1>

在您的案例中使用以下代码：

工作DEMO

  jQuery $）{
 $（'。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'））; / *在这里错过了parent（）* / 
 if（tab_cookie =='hide'）{
 $。 cookie（$（this）.parent（）。attr（'id'），'show'）; 
} 
} 
}）; 
}）; 
  

I have a question and issue related to this thread. I have multiple divs which are loaded dynamically through c# code. We can't count the number of panels (each category) that needed to be displayed in a webpage. It might be a single or 4 or 5 sometimes more. The previous code is working properly as expected.

Now, I want to retain the collapsed or expanded state of each div on a postback or page refresh. I tried to use jquery cookie, but we can't seem to set and get the cookie status for each sections.

The code that I have tried is

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/

Update:

I tried with this also: http://jsfiddle.net/ravimallya/qL79j/7/ . I can't change markup than this one.

Can anyone give a try? Thanks in advance.

解决方案

set ID to all of your blocks and create cookie based on IDs. like this:

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');
        }
    }
});

then use this code:

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

---

update

in your case use this code:

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');
            }
        }
    });
});

这篇关于jquery Cookie设置并获得div的扩展状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！