JavaScript 单击时关闭菜单

Question

我对 JavaScript 非常陌生，在尝试获得所需结果时遇到了一些麻烦。我根据 w3 学校的示例构建了一个 Canvas 外菜单。我希望用户除了使用“x”按钮之外，还能够在菜单打开时单击汉堡字形图标来关闭菜单。如果有一种更简单的方法可以使用 JQuery 来完成此操作，那就太好了!

这是我的尝试:

var width = document.getElementById("nav").style.width;
while (width != 0) {
    document.getElementById('glyphicon-menu-hamburger').onclick = closeNav();
  }

这是代码笔: https://codepen.io/nathanmathews/pen/XRKBBN

这是我的更新尝试，仍然不正确:

var width = document.getElementById("nav").style.width;
if (width != 0) {
    document.getElementById('glyphicon-menu-hamburger').onclick = closeNav;
  }

Answer 1

只需将 openNav() 替换为 toggleNav()

function toggleNav() {
  var nav = document.getElementById("nav"),
   main = document.getElementById("main");
  if (nav.style.width == "250px") {
    nav.style.width = "0";
    main.style.marginRight = "0";
  }
  else {
    nav.style.width = "250px";
    main.style.marginRight = "250px";
  }
}