在不同的菜单列表上保持切换状态

Question

我有一个左侧导航菜单，每个菜单项都使用列表。我这样做是为了让用户可以 hide/unhide 整个菜单上的某些子菜单。

不幸的是，当您隐藏一个子菜单然后刷新页面时，每个子菜单都会呈现当前状态，而不仅仅是那个。（取消隐藏时反之亦然）。

HTML:

    <div>
    <h1 class="toggler">Messaging</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>
        </ul>
    </div>
    <div>
    <h1 class="tree-toggler">Information</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>
        </ul>
    </div>

脚本：

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

  $('h1.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);
  });
});

我怎样才能让我的代码保存选择到 hide/unhide 的每个子菜单列表的状态？

Answer 1

<style> .toggler {cursor: pointer} </style>
<div>
<h1 class="toggler">Messaging</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>
    </ul>
</div>
<div>
<h1 class="toggler">Information</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>
    </ul>
</div>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var clientStates = [];
$(document).ready(function () {
  $('h1.toggler').click(function (e) {
    $(this).parent().children('ul.tree').toggle(300);
    setTimeout(function() {saveLocalStorage();}, 350);  // wait until the animation is over, then save the state
  });
  loadLocalStorage();
});
function loadLocalStorage() {
  toggleState = JSON.parse(localStorage.getItem("toggleState"));
  if(typeof toggleState === 'object' ) {
    clientStates= toggleState;
  }
  for(var i in clientStates) {
    if(clientStates[i]) {
      $('h1.toggler').eq(i).parent().children('ul.tree').show();
    }
    else {
      $('h1.toggler').eq(i).parent().children('ul.tree').hide();
    }
  }
}
// read from the DOM if elements are visible or not.  Save to localStorage
function saveLocalStorage() {
  clientStates = [];
  $('h1.toggler').each(function() {
    if( $(this).parent().children('ul.tree').is(":visible") ) {
      clientStates.push(true);
    }
    else {
      clientStates.push(false);
    }
  });
  localStorage.setItem("toggleState", JSON.stringify(clientStates));
}
</script>

注意一点：UL的子元素应该是LI元素，所以把A放在LI里面

在不同的菜单列表上保持切换状态

Keep toggle state on different menu lists

html

javascript

list

toggle

local-storage