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

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

您可以关注link：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);
  });
});

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

Keep list toggle state on page refresh

html

javascript

jquery

list

toggle