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

去商店，买一包随机饼干。当你来吃每一个时，如果饼干含有巧克力，则折叠内容，否则展开它。:P

更严肃地说，我推荐jQuery cookies 插件——它允许你设置、获取或删除 cookie。在父级上放置一个 ID，并在折叠内容时设置一个包含名称中 ID 的 cookie。展开时取消设置。在页面加载时检查 cookie；如果存在，请进行 slideUp 调用等。

您可能还想查看jQuery UI - 那里有一些有用的功能可以显示和隐藏内容，例如手风琴。

于 2012-07-27T17:18:53.560 回答
0

如果你不介意使用 jQuery 插件，你可以使用jquery-cookie。使用起来非常简单。

设置 cookie：

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

获取 cookie 值：

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