创建一个cookie来控制Jquery切换的内容

Creating a cookie to control Jquery toggled content

本文关键字：Jquery 控制 cookie 一个 创建      更新时间：2024-05-01

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

您可以这样做：每次状态更改时设置一个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>

去商店，随便买一包饼干。当你吃每一块饼干时，如果饼干中含有巧克力，就把里面的东西折叠起来，否则就把它膨胀起来

更重要的是，我推荐使用jQuery cookie插件，它允许您设置、获取或删除cookie。在父级上放置一个ID，在折叠内容时，在名称中设置一个包含该ID的cookie。展开时取消设置。页面加载时检查cookie；如果存在，进行slideUp调用等

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

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

设置cookie：

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

获取cookie值：

alert($.cookie("cookie name"));
相关文章：