我正在尝试制作一个简单的菜单,使其向下扩展,然后在重新加载时使其保持展开/关闭状态,具体取决于用户在重新加载之前的状态。我知道有一个用于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();
如果您还有其他疑问,请在评论中提出,我很乐意为您提供帮助。