0

折りたたみ可能なコンテンツを表示するか非表示にするかを制御する Cookie を追加したいと考えています。サイト読み込み時のデフォルトが表示されます。これまでのところ、Cookie の実装を試みましたが失敗したため、生のコードを以下に示します。

<script type="text/javascript"> 
  $(document).ready(function(){
      $(".toggle_parent").toggle(function(){
      $(".toggled_content").slideUp();
      $("img.upmid").attr('src',"images/downmid.png");
    },function(){
      $(".toggled_content").slideDown();
      $("img.upmid").attr('src',"images/upmid.png");
    });
  });
</script>
4

3 に答える 3

1

状態が変化するたびに Cookie 値を設定し、ページがロードされたときにその Cookie 値を調べて、以前に設定された Cookie 値と一致するように初期状態を設定することで、このようにすることができます。

この CSS を追加して、デフォルトの状態を閉じて作成します。これにより、目的の最終状態が閉じている場合、最初は開いていると表示されずに閉じます。

.toggled_content {display: none;}

この JavaScript を追加します。

<script type="text/javascript"> 
  $(document).ready(function(){

      function hideContent() {
          $(".toggled_content").slideUp();
          $("img.upmid").attr('src',"images/downmid.png");
      }

      function showContent() {
          $(".toggled_content").slideDown();
          $("img.upmid").attr('src',"images/upmid.png");
      }

      // set initial state based on cookie value
      // assumes default state is closed
      if (readCookie("updown") == "down") {
          showContent();
      }

      $(".toggle_parent").toggle(function(){
          hideContent();
          createCookie("updown", "up", 30)
      },function(){
          showContent();
          createCookie("updown", "down", 30);
    });
  });


function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

</script>
于 2012-07-27T17:17:26.860 に答える
0

店に行き、ランダムなクッキーのパックを購入します。1つ1つ食べに来たら、クッキーにチョコレートが入っている場合は中身をつぶし、入っていない場合は広げます。:P

さらに深刻なことに、jQuery クッキー プラグインをお勧めします。これにより、クッキーの設定、取得、または削除が可能になります。親に ID を付け、コンテンツを折りたたむと、名前に ID を含む Cookie が設定されます。展開時に設定を解除します。ページの読み込み時に Cookie を確認します。存在する場合は、slideUp 呼び出しなどを行います。

jQuery UIもチェックしてみてください。アコーディオンなど、コンテンツを表示および非表示にするための便利な機能がいくつかあります。

于 2012-07-27T17:18:53.560 に答える
0

jQuery プラグインの使用を気にしない場合は、jquery-cookieを使用できます。使い方はとても簡単です。

クッキーの設定:

$.cookie("cookie name", "value");

Cookie 値を取得します。

alert($.cookie("cookie name"));
于 2012-07-27T17:19:49.467 に答える