使用jquery和slidetoggle设置cookie值

时间:2013-07-03 15:56:44

标签: jquery toggle jquery-cookie

我正在使用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>

1 个答案:

答案 0 :(得分: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