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

因此，我所做的会话存储有一个小问题。

基本上，我希望会话存储显示状态，无论是块显示还是不显示，现在，如果我在click函数上使用切换，这将非常有效，但是出于美观原因，我想使用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

最佳答案

这是因为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>