Question

我正在尝试制作一个简单的菜单，使其向下扩展，然后在重新加载时保持其展开/关闭状态，具体取决于用户在重新加载之前的状态。我知道有一个针对javascript的html localstorage函数，但是我不确定是否可以将其实现到我的代码中。不用说，我对Java语言特别陌生。

这是我的代码，

<p class="portfolio_menuOpt collapsible">
Series 
</p>
<div class="sub_menu_collapsible">
<p class="portfolio_menuOpt_Sub">
        Feral - Mustang 69' 
    </p>
    <p class="portfolio_menuOpt_Sub ">
        Mnemosyne - Morris Minor 1000
    </p>
</div> 

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

我该如何实现？在一段时间后，我是否可以清空此本地存储（并确保一次只能使用一个可折叠的存储设备？）。谢谢大家的帮助。

Answer 1

您所需要的只是在单击下拉菜单时更改本地存储中的变量。在每个重新加载页面之后，从下拉列表中打开或关闭下拉列表，从本地存储知道此变量。

以下是更改/设置本地存储变量的代码：

localStorage.setItem('dropdownToggle', 'true');

以下是获取本地存储变量的代码：

localStorage.getItem('dropdownToggle');

您还可以设置超时时间，然后从本地存储中删除变量：

localStorage.removeItem('dropdownToggle');

或者只是全部清洁

localStorage.clear();

如果您有其他问题要在评论中提出，我将很乐意为您提供帮助。

如何使用本地存储来维护下拉菜单状态？

1 个答案: