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

EDIT: Я посмотрел в используя что-то вроде этого:

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

ИЛИ

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

бы что-то вроде этой работы? и будет ли нулевая работа или она должна быть значением, подобным второму примеру? Из тестирования он позволяет создать файл cookie со значением «Открыть», но когда пользователь снова нажмет на него, он не изменит значение на «Свернутый».

Это из-за .is(":hidden") часть?

Answer 1

Предполагая, что вы используете jQuery cookie plugin, ваш код должен работать должным образом.

$.cookie('name', null); 

действительно эффективно удаляет элемент cookie. Вы также должны указать соответствующее время истечения, чтобы значения cookie сохранялись в сеансах браузера. например

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

Подсказка: вы можете использовать .toggle (showOrHide) и .toggleClass (имя класса, коммутатор) для упрощения кода.