我创建了一个侧边栏，它以一个简单的javascript切换打开，如果用户打开了侧边栏，我想在页面更改期间保持打开状态。
单击打开菜单按钮时，它会运行切换功能。
.HTML：
<h2 onclick="toggleSidebar()"><a href="#">Table of
Contents</a></h2>
<nav id="sidenav">
<div id="top-sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="toggleSidebar()">Table of Contents
  ×</a>
</div>
<ul class="subnav">
<li>
<a href="chapter/1.html">Chapter 1
<p>Down the Rabbit-Hole</p>
</a>
</li>
...
</ul>
</nav>
JavaScript：
function toggleSidebar() {
document.getElementById("sidenav").classList.toggle("active");
document.getElementById("main").classList.toggle("sideNavActive");
document.getElementById("buttonHomepage").classList.toggle("sideNavTopBar");
document.getElementById("prevChapter").classList.toggle("sideNavActive");
}
请在下面找到方法，
在您的身体或文档中准备好按照以下内容实现，
.HTML
<body onload=loadMenu()>
或
document.addEventListener('DOMContentLoaded', (event) => {
loadMenu()
})
或者 - 如果你有 jQuery
$(document).ready(function() {
loadMenu();
});
脚本
function loadMenu() {
if(getLocalStorage("openMenu") == "true") {
toggleSidebar()
}
}
function toggleSidebar() {
document.getElementById("sidenav").classList.toggle("active");
document.getElementById("main").classList.toggle("sideNavActive");
document.getElementById("buttonHomepage").classList.toggle("sideNavTopBar");
document.getElementById("prevChapter").classList.toggle("sideNavActive");
/*for toggle the menu on localstorage*/
(getLocalStorage("openMenu") == "true" ? setLocalStorage("openMenu", false) : setLocalStorage("openMenu", true)); //wil toggle and trigger menu when modal opened
}
function setLocalStorage(key, value) {
if(typeof(Storage) !== "undefined")
{
window.localStorage.setItem(key, value);
}
}
function getLocalStorage(key) {
if(typeof(Storage) !== "undefined")
{
return window.localStorage.getItem(key)
}
}