会话存储和淡入淡出切换问题

Question

因此，我对我创建的会话存储有一个小问题。

基本上，我希望会话存储显示状态，无论是阻塞还是无，现在如果我使用切换点击功能，这可以很好地工作，但我想使用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的建议都是很棒的。

干杯!

CodePen：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>

​