Question

我在制作时遇到问题，以便登录用户隐藏菜单的某个部分，以便在会话期间保持这种状态。

$(document).ready(function () {
  $('h1.tree-toggler').click(function () {
    $(this).parent().children('ul.tree').toggle(300);
  });
});

使用此HTML：

<div>
  <h1 class="tree-toggler">Heading</h1>
  <ul class="tree">
    <a href="#"><li>Link 1</li></a>
    <a href="#"><li>Link 2</li></a>
    <a href="#"><li>Link 3</li></a>
    <a href="#"><li>Link 4</li></a>
    <a href="#"><li>Link 5</li></a>
  </ul>
</div>

切换效果非常好，但是当您更改页面时，切换效果并不理想。

如何让它保持在下一页切换的方式？

Answer 1

您可以使用localStorage API来保留本地数据。

$(document).ready(function () {

    let storage = localStorage || sessionStorage;

    // let $component = $(document.getElementById('component'));

    if (storage) {
        let state = JSON.parse(storage.getItem('state'));

        if (state) {
            $('h1.tree-toggler').trigger('click');
            // $component.toggle(300);
        }
    }

    $('h1.tree-toggler').click(function () {
        if (storage) {
            storage.setItem('state', (!JSON.parse(storage.getItem('state')) || true))
        }
        $(this).parent().children('ul.tree').toggle(300);
    });
});

您可以手动切换元素（$component）或触发已有的事件（h1.tree-toggler[click]）。

Answer 2

您可以点击链接：How to get JS variable to retain value after page refresh?

您还可以使用以下代码：

$(document).ready(function () {
    if(localStorage.getItem("toggleState") == "1")
    $('ul.tree').hide();

  $('h1.tree-toggler').click(function () {
    var ts = localStorage.getItem("toggleState");
    if(ts == null || ts == "0") {
            var tv = "1";
            localStorage.setItem("toggleState", tv);
        }else {
        var tv = "0";
            localStorage.setItem("toggleState", tv);
    }
    $(this).parent().children('ul.tree').toggle(300);
  });
});

在页面刷新时保持列表切换状态

2 个答案: