时间戳

首页 > 解决方案 > 在页面重新加载中保留 div 隐藏/显示

javascript - 在页面重新加载中保留 div 隐藏/显示

问题描述

我有一个隐藏和显示 html div 的按钮

<button id="hideshow" title="Click to Show/Hide Assessment"></button>

这是脚本

$(document).ready(function(){ /// hide and show button
    $('#hideshow').click(function() {
        $('#containerDiv1').toggle("slideLeft");
        $("i", this).toggleClass("fas fa-lg fa-chevron-up fas fa-lg fa-chevron-down");
    });
});

现在我要实现的是当用户选择隐藏div并单击按钮时，当他重新加载页面时它应该仍然隐藏。因为默认情况下，当我的网页打开时，我的 div 会显示。

有什么帮助吗？？

标签： javascript

解决方案

使用sessionStorage,localStorage或 acookie来保持状态，然后在页面加载时检索和恢复它。这确实需要一些工作，但 UI 的闪烁是免费的；）

这说明了原理：

$(document).ready(function(){ /// hide and show button
    const containerState = localStorage.getItem('containerDiv1');
    switch (containerState) {
      case 'visible':
        // your code for when the user last saw it "visible"
        break;
      case 'hidden':
        // your code for when the user last saw it "hidden"
        break;
      default:
        // any action that should take place when containerState is empty (not set, never clicked)
    }
    $('#hideshow').click(function() {
        $('#containerDiv1').toggle("slideLeft");
        $("i", this).toggleClass("fas fa-lg fa-chevron-up fas fa-lg fa-chevron-down");
        // on every click, store the current visibility state in localStorage
        localStorage.setItem('containerDiv1', $('#containerDiv1:visible').length ? 'visible' : 'hidden');
    });
});

推荐阅读