使用 jquery 和 slidetoggle 设置 cookie 值答案

【问题标题】：Setting cookie values with jquery and slidetoggle使用 jquery 和 slidetoggle 设置 cookie 值
【发布时间】：2013-07-01 10:05:17
【问题描述】：

我正在使用 jquery 的 slideToggle 和 carhartl 的 cookie 插件 (https://github.com/carhartl/jquery-cookie) 来记住 div 是否打开的状态。我让它工作并记住了位置，但我想为 cookie 设置 1 天的到期时间，而不是让它默认持续到会话结束。

我可以在切换状态打开时设置到期时间，但一旦关闭，我就很难找到在哪里设置到期时间。有人可以帮忙吗？

谢谢:-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js"></script>
<style>
#billboardButton {
    background-color:#f1f1f1;
    color:#666;
    padding:3px;
    width:100px;
    cursor:pointer;
    text-align:center;
    margin:0 auto;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){

    var cook= $.cookie('billboardStatus', 'true', {expires: 1});

    if(cook=='false') {

        $('#billboard').hide();

        $("#billboardButton").css("backgroundColor", "#e1e1e1").text('Open Ad');        

    } else {

    $('#billboard').show();

        $("#billboardButton").text('Close Ad');
    }

    $('#billboardButton').on('click', function() {

        $('#billboard').stop().slideToggle('normal', function(){

            $("#billboardButton").css("backgroundColor", $(this).is(':not(:visible)') ? "#e1e1e1" : "").text($(this).is(':visible') ? 'Close Ad' : 'Open Ad');

            $.cookie('billboardStatus', $(this).is(':visible'));

        });

    });

}); // End document ready
</script>
<div id="test" style="width:970px;margin:20px auto;">
    <div id="billboardButton">Close Ad</div>
    <div id='billboard' style='width:970px; height:250px;background-color:#0C9;'></div>
</div>
</body>
</html>

【问题讨论】：

stackoverflow.com/questions/1830246/…
那么你的意思是你需要在.slideToggle() 中建立一个条件语句来评估一个div 的可见性并做出反应，对吧？
我知道它是如何工作的@cptnk，我只是看不出把它放在哪里;-)
我已经有了 @Ohgodwhy，我只需要设置 cookie 的过期时间，但无法弄清楚
我明白了，很抱歉。

标签： jquery toggle jquery-cookie

【解决方案1】：

自己找到了答案:-)

我在开头添加了一个 if exists 语句来检查 cookie，并且还添加了设法发现将 {expires: 1} 参数添加到 slideToggle 代码的位置，这纯属偶然。

$(document).ready(function(){


    if($.cookie('billboardStatus')) {

        var cook = $.cookie('billboardStatus');

    } else {

        var cook = $.cookie('billboardStatus', 'true', {expires: 1});

    }

    //var cook= $.cookie('billboardStatus');

    if(cook=='false') {

        $('#billboard').hide();

        $("#billboardButton").css("backgroundColor", "#e1e1e1").text('Open Ad');        

    } else {

    $('#billboard').show();

        $("#billboardButton").text('Close Ad');
    }

    $('#billboardButton').on('click', function() {

        $('#billboard').stop().slideToggle('normal', function(){

            $("#billboardButton").css("backgroundColor", $(this).is(':not(:visible)') ? "#e1e1e1" : "").text($(this).is(':visible') ? 'Close Ad' : 'Open Ad');

            $.cookie('billboardStatus', $(this).is(':visible'), {expires:1});

        });

    });

}); // End document ready

【讨论】：