javascript - session 存储和淡入淡出切换问题

Question

所以我对我所做的 session 存储有一个小问题。

基本上，我希望 session 存储显示状态，无论是 block 还是无，现在如果我在单击功能上使用切换，则效果非常好，但我想使用 fadeToggle 来美观，并且由于某种原因它不会存储国家不再。

<button class="button">Show / Hide</button>
<div class="content">Content Goes Here</div>

.button {
    background: white;
    border: 2px solid #333;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    width: 100%;
}

.content {
    display: none;
    background: dodgerblue;
    color: white;
    margin-top: 20px;
    padding: 20px;
}

function toggleTest() {
    $(".button").click(function (event) {
         $(".content").stop().fadeToggle();
         sessionStorage.setItem("show-hide", $(".content").css("display"));
    });

    if (sessionStorage.getItem("show-hide")) {
        $(".content").css("display", sessionStorage.getItem("show-hide"));
    }
}

$(document).ready(function () {
    toggleTest();
});

任何关于为什么这不适用于 fadeToggle 的建议都会很棒。

干杯!

代码笔:https://codepen.io/nickelse/pen/zYOXGjw

Answer 1

这是因为fadeToggle使用动画(在动画完成之前代码 sessionStorage.setItem("show-hide", $(".content").css("display")); 是已经执行)使用 fadeToggle 的回调函数来克服，它应该可以正常工作

正在连接工作fiddle链接

function toggleTest() {
    $(".button").click(function (event) {
         $(".content").stop().fadeToggle(function(){
            sessionStorage.setItem("show-hide", $(".content").css("display"));
         });
         
    });

    if (sessionStorage.getItem("show-hide")) {
        $(".content").css("display", sessionStorage.getItem("show-hide"));
    }
}

$(document).ready(function () {
    toggleTest();
});

.button {
    background: white;
    border: 2px solid #333;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    width: 100%;
}

.content {
    display: none;
    background: dodgerblue;
    color: white;
    margin-top: 20px;
    padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button">Show / Hide</button>
<div class="content">Content Goes Here</div>