刷新后保持手风琴打开

Question

我有一个带有手风琴菜单的侧边栏，但是当我刷新或转到另一个页面时，它关闭了。在这些行动之后，它怎么能保持开放?这里的CSS示例:https://jsfiddle.net/ag9q1tvc/

JavaScript:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var parent = this.parentElement;
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
parent.style.maxHeight = parseInt(parent.style.maxHeight) + panel.scrollHeight + "px";
} 
});
}

HTML:

<div class='sidenav'>
<button class='accordion'><i class='fa fa-star' aria-hidden='true'></i>&nbsp; FAV</button>
<button class='accordion'><i class='fa fa-th-large' aria-hidden='true'></i>&nbsp; SALES</button>
<div class='panel'>
<a href='item1.php'>&emsp;ITEM 1</a>
<a href='item2.php'>&emsp;ITEM 2</a>
</div>

我在其他答案中找不到我的问题的确切方法。谢谢你！

Answer 1

您需要在某处存储手风琴状态，它可以是sessionStorage或localStorage(也称为cookies)。对于我来说，sessionStorage是最好的方法，下面是你可以做的一个例子:

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var parent = this.parentElement;
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
sessionStorage.setItem(parent.id, ""); // store it as closed
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
parent.style.maxHeight = parseInt(parent.style.maxHeight) + panel.scrollHeight + "px";
sessionStorage.setItem(parent.id, "open"); // store it as open
}
});
// here we are getting state from sessionStorage
var parent = acc[i].parentElement;
if (sessionStorage.getItem(parent.id) === "open") {
parent.querySelector(".panel").style.maxHeight = parent.querySelector(".panel").scrollHeight + "px";
parent.style.maxHeight = parseInt(parent.style.maxHeight) + parent.querySelector(".panel").scrollHeight + "px";
acc[i].classList.add("active");
}
}

请注意，它将保存状态，直到浏览器关闭，否则你可以使用cookie。

Answer 2

:目标选择器和锚标记(无JS)

如果元素的id等于url后面的哈希值(#)，则:target选择器匹配。由于浏览器通过重载或导航来保存哈希值，因此这将在url中持久化手风琴的状态。

• PRO:不需要JavaScript，跨浏览器兼容
• CON:如果你需要#用于其他事情(如单页路由)，这不是一个选项。

#accordion {
display: blocK;
border: 2px solid blue;
}
#accordion > .content {
display: none;
}
#accordion:target > .content {
display: block;
}

<a href="#accordion">open</a>
<a href="#">close</a>
<a id="accordion">
<div class="content">
Content
</div>
</a>

Answer 3

您可以尝试使用本地存储，它是存储在浏览器缓存中的变量

localStorage.setItem("item1", "active");

你可以在这里看到更多信息。