jQuery的切換餅乾

我有以下代碼（是的，我知道這很長篇大論，但我想保持儘可能多的相同越好）jQuery的切換餅乾

希望這將是有意義的，但基本上就是我想要做的是當用戶點擊其中一個切換時，它將創建相關的cookie並將其值設置爲「打開」，然後當他們再次單擊時，它將刪除cookie。反之亦然，取決於面板是否打開。所以我試圖讓cookies隨着切換器被及時創建和刪除。

我該怎麼做？謝謝。

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

將類似的東西的工作？那麼這個空工作還是需要像第二個例子那樣的價值？從測試中可以創建cookie的值爲'打開'，但是當用戶再次單擊時，它不會將值更改爲'摺疊'。

這是因爲.is(":hidden")部分？

來源

2010-08-26 Cameron

您正在使用動畫，在動畫結束之前調用.is（「：hidden」）不會給出最終狀態。你可能想要一個狀態變量來明確地跟蹤邏輯狀態。 – Arrix 2010-08-26 12:14:11

你能告訴我如何做到這一點？謝謝。 – Cameron 2010-08-26 12:17:23

try $ .cookie（'FilterType'， $ .cookie（'FilterType'）=='Open'？null：'Open'）; – Arrix 2010-08-26 12:27:55

假設您使用的是jQuery cookie plugin，您的代碼應該按預期工作。

$.cookie('name', null);

確實有效地「刪除」了cookie項目。您還應指定適當的到期時間，以便Cookie值在瀏覽器會話中保持不變。例如

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

尖端：可以使用.toggle（showOrHide）和.toggleClass（類名，開關），以簡化代碼。

來源

2010-08-26 12:07:16 Arrix

是的cookie被創建好。問題在於，如果用戶在打開面板時切換面板，則不會刪除該cookie或爲其提供新值。也許是因爲is（）代碼的一部分？ – Cameron 2010-08-26 12:09:15

jQuery的切換餅乾

回答

相關問題