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

OR

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

这样的事情会起作用吗？并且null工作还是需要像第二个例子那样的值？从测试开始，它允许使用'Open'值创建cookie，但是当用户再次单击它时，它不会将值更改为'Collapsed'。

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

Answer 1

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

$.cookie('name', null);

有效地“删除”了Cookie项目。您还应指定适当的到期时间，以便跨浏览器会话保持cookie值。 e.g。

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

提示：您可以使用.toggle（showOrHide）和.toggleClass（className，switch）来简化代码。

jQuery切换Cookie

1 个答案: