创建cookie来控制jQuery的切换内容

我想补充一点，我的控制可折叠内容是否被显示或隐藏的cookie。显示网站加载时的默认值。我已尝试并未能实现cookie，因此原始代码如下所示。创建cookie来控制jQuery的切换内容

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

来源

2012-07-27 user1558300

您可以通过每次状态更改设置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-27 17:17:26 jfriend00

辉煌，曾立竿见影。仅仅为了美观，会有更好的方法来保持div在加载时关闭。目前，如果切换关闭，其负载打开，然后滑回？ – user1558300 2012-07-27 17:29:22

@ user1558300 - 我修改了我的答案，以便初始状态关闭，因此如果所需的最终状态关闭，它将保持关闭状态。如果所需的最终状态是打开的，它将在页面加载时打开。 – jfriend00 2012-07-27 17:39:15

去商店，买的是随机的cookies的包。当你来吃每一个，如果饼干含有巧克力崩溃的内容，否则扩大它。：P

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

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

来源

2012-07-27 17:18:53 ClarkeyBoy

还要注意的是，根据浏览器支持，您不妨看看localStorage的 - 如果你不需要在服务器上的Cookie这可以降低开销有用。 – ClarkeyBoy 2012-07-27 17:23:21

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

设置一个cookie：

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

得到一个饼干值：

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

来源

2012-07-27 17:19:49 tjscience

创建cookie来控制jQuery的切换内容

回答

相关问题