使用jQuery cookie切换与show hide的链接

时间:2012-08-17 07:11:16

标签: jquery

我有以下代码

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

对于我的生活,我无法弄清楚如何反过来 - 最初我想要[+]打开高级单位选项(这是可见的)和div与'adv-unit-options类'被隐藏。

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

非常感谢任何帮助 关于NickP

1 个答案:

答案 0 :(得分:0)

Fiddle here

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

ý。