垂直侧边栏导航菜单可通过一个按钮折叠

Question

我正在尝试创建一个简单的侧边栏导航，它的工作原理与此网站上的菜单类似-->

https://www.romereborn.org/arch-of-constantine/arch_quiz.html

基本上，我试图创建一个菜单，第一次点击按钮打开菜单，然后点击相同的按钮关闭菜单，但菜单仍然可见。

我开始在w3schools上使用这个例子，但它有两个按钮而不是一个。我试着编辑按钮，使其只有一个双向工作的关闭按钮，但根本不起作用。

https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp

有人能帮助我或指导我学习教程吗？

Answer 1

您可以删除openbtn按钮，只需在HTML中保留closebtn即可。

在CSS中更改此内容：

.sidebar { width: 35px }
.sidebar closebtn {right: 0px}
#main { padding-left : 40px }

将您的javascript更改为只有关闭的事件btn:

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
let bool = false;
function closeNav() {
bool = !bool;
if (bool) {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.querySelector(".closebtn").innerHTML = "×";
} else {
document.getElementById("mySidebar").style.width = "35px";
document.getElementById("main").style.marginLeft = "0";
document.querySelector(".closebtn").innerHTML = "☰";
}
}