垂直侧边栏导航菜单可一键折叠

【问题标题】：Vertical sidebar nav menu collapsible with one button垂直侧边栏导航菜单可一键折叠
【发布时间】：2020-10-06 14:11:36
【问题描述】：

我正在尝试创建一个类似于本网站菜单的简单侧边栏导航 -->

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

基本上我正在尝试创建一个菜单，其中第一次单击按钮打开菜单并单击相同的按钮关闭菜单但菜单仍然可见。

我开始在 w3schools 上使用这个示例，但它有两个按钮而不是一个。我尝试将按钮编辑为只有一个可以双向使用的关闭按钮，但它根本不起作用。

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

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

【问题讨论】：

标签： javascript menu navigation sidebar

【解决方案1】：

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

在你的 CSS 中改变这个：

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

将您的 javascript 更改为只有带有 closebtn 的事件：

/* 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 = "&times;";
  } else {
    document.getElementById("mySidebar").style.width = "35px";
    document.getElementById("main").style.marginLeft = "0";
    document.querySelector(".closebtn").innerHTML = "&#9776;";
  }
}

【讨论】：