Question

尝试通过添加Cookie https://github.com/carhartl/jquery-cookie来维持上次切换状态。这是我尝试过的。

<html>
<head>
</head>
<body>
    <p>Lorem ipsum.</p> 
    <button>Toggle</button>
</body>
</html>

然后是jQuery和Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        if ($.cookie){
            $("p").toggle(!(!!$.cookie("toggle-state")) || $.cookie("toggle-state") === 'true'); 
        }

    $("button").on('click', function(){

    $("p").toggle();
        $.cookie("toggle-state", $("p").is(':visible'), {expires: 1, path:'/'}); 
    });
});
</script>

Fiddle

我希望cookie能够记住切换的最后状态，无论是隐藏还是显示，它都存在了一天。

不工作。为什么呢？

Answer 1

由于您的代码无法正常运行，因此您没有关闭首次点击事件。

$("button").click(function() {

当你关闭它时，一切正常：

工作代码：

$(document).ready(function() {
    $("button").click(function() {
        if ($.cookie){
            $("p").toggle(!(!!$.cookie("toggle-state")) || $.cookie("toggle-state") === 'true'); 
        }
    });

    $("button").on('click', function() {
        $("p").toggle();
        $.cookie("toggle-state", $("p").is(':visible'), {expires: 1, path:'/'}); 
    });
});

添加cookie后，Jquery切换不起作用

1 个答案:

工作代码：