jQuery 切换 Cookie

Question

我有以下代码（是的，我知道它很冗长，但我希望尽可能保持相同）

希望这会有意义，但基本上我想要做的是当用户单击其中一个切换时，它将创建相关的 cookie 并将其值设置为“打开”，然后当他们再次单击它时删除 cookie .反之亦然，具体取决于面板是否打开。因此，我试图通过切换及时创建和删除 cookie。

我该怎么做？谢谢。

$("div#FilterType div.PanelContent ul").hide();
$("div#FilterLevel div.PanelContent ul").hide();
$("div#FilterAge div.PanelContent ul").hide();
$("div#FilterCategory div.PanelContent ul").hide();

$("div#FilterArea div.PanelContent ul").show();
$("div#FilterArea div.PanelContent p").hide();
$("div#FilterArea div.PanelContent div.MapPanel").show();
$("div#FilterArea div.PanelHead h2 span").addClass("selected");

$("div.Filter div.PanelHead h2").attr('title', 'Toggle Panel');

$("div#FilterType div.PanelHead").click(function (e) {
    $("div#FilterType div.PanelContent ul").slideToggle('fast');
    $("div#FilterType div.PanelContent p").slideToggle('fast');
    $("div#FilterType div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterType',
            $("div#FilterType div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');
});
$("div#FilterLevel div.PanelHead").click(function (e) {
    $("div#FilterLevel div.PanelContent ul").slideToggle('fast');
    $("div#FilterLevel div.PanelContent p").slideToggle('fast');
    $("div#FilterLevel div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterLevel',
            $("div#FilterLevel div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');

});
$("div#FilterAge div.PanelHead").click(function (e) {
    $("div#FilterAge div.PanelContent ul").slideToggle('fast');
    $("div#FilterAge div.PanelContent p").slideToggle('fast');
    $("div#FilterAge div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterAge',
            $("div#FilterAge div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');
});
$("div#FilterArea div.PanelHead").click(function (e) {
    $("div#FilterArea div.PanelContent ul").slideToggle('fast');
    $("div#FilterArea div.PanelContent p").slideToggle('fast');
    $("div#FilterArea div.PanelContent div.MapPanel").slideToggle('fast');
    $("div#FilterArea div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterArea',
            $("div#FilterArea div.PanelContent ul, div#FilterArea div.PanelContent div.MapPanel").is(":hidden") ? 'Collapsed' : 'Open');
});
$("div#FilterCategory div.PanelHead").click(function (e) {
    $("div#FilterCategory div.PanelContent ul").slideToggle('fast');
    $("div#FilterCategory div.PanelContent p").slideToggle('fast');
    $("div#FilterCategory div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterCategory',
            $("div#FilterCategory div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');
});


// Checks the values of the cookies (if they exist) to open or close the panels

var FilterType = $.cookie('FilterType');
var FilterLevel = $.cookie('FilterLevel');
var FilterAge = $.cookie('FilterAge');
var FilterArea = $.cookie('FilterArea');
var FilterCategory = $.cookie('FilterCategory');

if (FilterType == 'Open')
{
    $("div#FilterType div.PanelContent ul").show();
    $("div#FilterType div.PanelContent p").hide();
    $("div#FilterType div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterType div.PanelContent ul").hide();
    $("div#FilterType div.PanelContent p").show();
    $("div#FilterType div.PanelHead h2 span").removeClass("selected");
}

if (FilterLevel == 'Open')
{
    $("div#FilterLevel div.PanelContent ul").show();
    $("div#FilterLevel div.PanelContent p").hide();
    $("div#FilterLevel div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterLevel div.PanelContent ul").hide();
    $("div#FilterLevel div.PanelContent p").show();
    $("div#FilterLevel div.PanelHead h2 span").removeClass("selected");
}

if (FilterAge == 'Open')
{
    $("div#FilterAge div.PanelContent ul").show();
    $("div#FilterAge div.PanelContent p").hide();
    $("div#FilterAge div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterAge div.PanelContent ul").hide();
    $("div#FilterAge div.PanelContent p").show();
    $("div#FilterAge div.PanelHead h2 span").removeClass("selected");
}

if (FilterArea == 'Open')
{
    $("div#FilterArea div.PanelContent ul").show();
    $("div#FilterArea div.PanelContent p").hide();
    $("div#FilterArea div.PanelContent div.MapPanel").show();
    $("div#FilterArea div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterArea div.PanelContent ul").hide();
    $("div#FilterArea div.PanelContent p").show();
    $("div#FilterArea div.PanelContent div.MapPanel").hide();
    $("div#FilterArea div.PanelHead h2 span").removeClass("selected");
}

if (FilterCategory == 'Open')
{
    $("div#FilterCategory div.PanelContent ul").show();
    $("div#FilterCategory div.PanelContent p").hide();
    $("div#FilterCategory div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterCategory div.PanelContent ul").hide();
    $("div#FilterCategory div.PanelContent p").show();
    $("div#FilterCategory div.PanelHead h2 span").removeClass("selected");
}

编辑： 我已经研究过使用这样的东西：

$.cookie('FilterType', 
                $("div#FilterType").is(":hidden") ? null : 'Open');

或

$.cookie('FilterType',
                $("div#FilterType").is(":hidden") ? 'Collapsed' : 'Open');

这样的东西有用吗？ null 会起作用还是需要像第二个示例一样的值？通过测试，它允许使用“打开”的值创建 cookie，但是当用户再次单击它时，它不会将值更改为“已折叠”。

这是因为.is(":hidden") 部分吗？

Answer 1

假设您使用的是jQuery cookie plugin，您的代码应该可以按预期工作。

$.cookie('name', null);

确实有效地“删除”了 cookie 项。您还应该指定适当的过期时间，以便 cookie 值在浏览器会话中保持不变。例如

$.cookie('the_cookie', 'the_value', { expires: 365 });

提示：您可以使用 .toggle( showOrHide ) 和 .toggleClass( className, switch ) 来简化代码。