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

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

基本上，我希望会话存储显示状态，无论它是块还是无，现在如果我在单击功能上使用切换，这将非常有效，但出于美观考虑，我希望使用fadeToggle，出于某种原因，它将不再存储状态

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

任何关于为什么这不适用于fadeToggle的建议都是非常棒的

干杯

---

CodePen:

这是因为fadeToggle使用动画（在动画完成代码

会话存储之前）。setItem（“show hide”，$（.content”）.css（“display”）；

已经执行）使用回调函数来克服fadeToggle的问题，应该可以正常工作

连接工作链接

函数切换测试（）{
$（“.button”）。单击（函数（事件）{
$（“.content”）.stop（）.fadeToggle（函数（）{
sessionStorage.setItem（“show hide”，$（.content”）.css（“display”）；
});
});
if（sessionStorage.getItem（“显示隐藏”））{
$（“.content”）.css（“显示”，sessionStorage.getItem（“显示隐藏”）；
}
}
$（文档）.ready（函数（）{
切换测试（）；
});
。按钮{
背景：白色；
边框：2倍实心#333；
字体家族：继承；
字体大小：16px；
字号：600；
填充：10px 20px；
宽度：100%；
}
.内容{
显示：无；
背景：道奇蓝；
颜色：白色；
边缘顶部：20px；
填充：20px；
}

显示/隐藏
内容放在这里
这是因为fadeToggle使用动画（在动画完成代码
会话存储之前）。setItem（“show hide”，“$（.Content”）。css（“display”）；
已经执行）使用回调函数来克服fadeToggle的问题，并且应该可以正常工作

连接工作链接


函数切换测试（）{
$（“.button”）。单击（函数（事件）{
$（“.content”）.stop（）.fadeToggle（函数（）{
sessionStorage.setItem（“show hide”，$（.content”）.css（“display”）；
});
});
if（sessionStorage.getItem（“显示隐藏”））{
$（“.content”）.css（“显示”，sessionStorage.getItem（“显示隐藏”）；
}
}
$（文档）.ready（函数（）{
切换测试（）；
});
。按钮{
背景：白色；
边框：2倍实心#333；
字体家族：继承；
字体大小：16px；
字号：600；
填充：10px 20px；
宽度：100%；
}
.内容{
显示：无；
背景：道奇蓝；
颜色：白色；
边缘顶部：20px；
填充：20px；
}

显示/隐藏
内容放在这里
.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();
});