Javascript 创建cookie以控制Jquery切换的内容

我想添加一个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>

$（文档）.ready（函数（）{
$（“.toggle_parent”）.toggle（函数（）{
$（“.toggled_content”）.slideUp（）；
$（“img.upmid”）.attr（'src'，“images/downmid.png”）；
}，函数（）{
$（“.toggled_content”）.slideDown（）；
$（“img.upmid”）.attr（'src'，“images/upmid.png”）；
});
});

您可以这样做，每次状态更改时设置一个cookie值，并在页面加载时检查该cookie值，以将初始状态设置为与以前设置的cookie值匹配：

添加此CSS以使默认状态为closed，这样，如果所需的结束状态为closed，则最初不会显示为open然后closed：

.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>

$（文档）.ready（函数（）{
函数hideContent（）{
$（“.toggled_content”）.slideUp（）；
$（“img.upmid”）.attr（'src'，“images/downmid.png”）；
}
函数showContent（）{
$（“.toggled_content”）.slideDown（）；
$（“img.upmid”）.attr（'src'，“images/upmid.png”）；
}
//基于cookie值设置初始状态
//假设默认状态为关闭
if（readCookie（“向上向下”）=“向下”）{
showContent（）；
}
$（“.toggle_parent”）.toggle（函数（）{
hideContent（）；
createCookie（“向上向下”，“向上”，30）
}，函数（）{
showContent（）；
createCookie（“向上向下”、“向下”，30）；
});
});
函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（天*24*60*60*1000））；
var expires=“；expires=“+date.togmString（）；
}
else var expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i

去商店，随便买一包饼干。当你来吃每一块饼干时，如果饼干里含有巧克力，就把它折叠起来，否则就把它展开P

更重要的是，我建议-这允许您设置、获取或删除cookie。在父对象上放置一个ID，在折叠内容时，在名称中设置一个包含该ID的cookie。在扩展时取消设置。在页面加载时检查cookie；如果存在，请执行slideUp调用等

---

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

如果您不介意使用jQuery插件，您可以使用。它使用起来非常简单

设置cookie：

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

获取cookies值：

alert($.cookie("cookie name"));

---

还请注意，根据浏览器支持的不同，您可能希望查看本地存储—如果您不需要服务器上的cookie，这有助于降低开销。Brilliant，可以直接工作。为了美观起见，有更好的方法在加载时保持div关闭。目前，如果切换为关闭，其加载打开，然后向上滑动？@user1558300-我修改了我的答案，使初始状态为关闭，因此如果所需的最终状态为关闭，它将保持关闭状态。如果所需的最终状态为“打开”，则会在加载页面时打开。