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

ここでフィドル

編集：可視性の状態を維持するために追加されたCookieコードとJQueryCookieへのリンク。

Y。

于 2012-08-17T07:53:05.360 に答える
0

ちょっとヨエリ私はこれを最終的に解決したかもしれないと思います...

 $(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 に答える