使用jQuery Cookie显示隐藏切换链接

Question

>我有以下代码

<p class="adv-toggle-buttons">             
     <a id="button_open" href="#" style="display: none;">[+] Open advanced unit options</a>
     <a id="button_close" href="#">[-] Close advanced unit options</a>
   </p>

和

 <div class="adv-unit-options">div elements here to be hidden/toggled</div>

脚本

  $(document).ready(function() {
  $('#button_open').hide(); //initially we keep the open button hidden
 $('#button_close').click(function () {
  $(this).hide(); //this hides the close button as the div is now closed
  $('.adv-unit-options').slideUp('fast'); //hides the div
  $('#button_open').show(); //shows the open button
  $.cookie("openclose","closed", {expires: 1}); // sets cookie
  return false;
});
$("#button_open").click(function () {
  $(this).hide(); //hides the open button as the div is now open
  $('.adv-unit-options').slideDown('fast'); //shows the div
  $('#button_close').show(); //shows the close button
  $.cookie("openclose","open", {expires: 1}); //sets cookie
  return false;
});
 if($.cookie("openclose") == "closed") {
    $("#button_close").hide();
    $("#button_open").show();
    $('.adv-unit-options').hide();
    };
});

对于我的生活，我无法弄清楚如何反向使用它 - 最初我想让 [+] 打开高级单位选项（这是可见的）和带有"adv-unit-options"类的div 被隐藏。

我正在处理的页面有一个提交按钮，所以在页面刷新/重新加载时我想记住上次选择的内容

任何帮助将不胜感激问候尼克·

Answer 1

在这里小提琴

编辑：添加了cookie代码和链接到JQuery cookie以保持可见性状态。

Y.

Answer 2

嘿，

yoeri，我想我可能终于解决了这个问题......

 $(document).ready(function() {
$(".adv-unit-options").hide();
   $('a.btn-trigger').text('[+] open advance unit options');
   // if cookie exist:
  if ($.cookie('openclose') == 'open') {
    $('.adv-unit-options').show();
    $('.adv-toggle-btn').addClass('expanded');
    $('a.btn-trigger').text('[-] close advance unit options');
}
  $(".adv-toggle-btn").click(function() {
    $(this).toggleClass('expanded'); // toggle class
    if ($(this).hasClass('expanded')) { 
        $.cookie('openclose', 'open', {expires: 1} ); //create cookie if .expanded is added to button
        $('a.btn-trigger').text('[-] close advance unit options');
    }
    else {
        $.cookie('openclose', null, {expires: 1} ); // else: delete cookie
        $('a.btn-trigger').text('[+] open advance unit options');
    };
    $(this).next('.adv-unit-options').animate({
        height: 'toggle', 
        opacity: 'toggle'
        },400);
    return false
  }); 
});
   HTML
   <p class="adv-toggle-btn"><a href="#" class="btn-trigger"></a></p>
   <div class="adv-unit-options">div elements here to be hidden/toggled</div>