我正在尝试制作一个简单的菜单,使其向下扩展,然后在重新加载时使其保持展开/关闭状态,具体取决于用户在重新加载之前的状态。我知道有一个用于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";
    }
  });
}


我该如何实现?在一段时间后,我是否可以清空此本地存储(并确保一次只能使用一个可折叠的存储设备?)。多谢您的协助。

最佳答案

您所需要的只是在单击下拉菜单时更改本地存储中的变量。在每个重新加载页面结束后,从本地存储中获取此变量,以了解下拉列表是应打开还是应关闭。

这是更改/设置本地存储变量的代码:

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


这是获取本地存储变量的代码:

localStorage.getItem('dropdownToggle');


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

localStorage.removeItem('dropdownToggle');


或只是清理所有

localStorage.clear();


如果您还有其他疑问,请在评论中提出,我很乐意为您提供帮助。

08-25 11:02
查看更多