0

我有以下代码

<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隐。

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

NickP 的任何帮助将不胜感激

4

2 回答 2

0

嘿 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>
于 2012-08-17T12:00:14.817 回答
0

在这里提琴

编辑：添加 Cookie 代码和指向 JQuery cookie 的链接以保持可见性状态。

Y。

于 2012-08-17T07:53:05.360 回答