移动菜单切换按钮不关闭答案

【问题标题】：mobile menu toggle button doesnt close移动菜单切换按钮不关闭
【发布时间】：2020-08-05 01:51:36
【问题描述】：

我的 javascript 代码在切换移动菜单的打开和关闭时遇到了一些问题。以下代码适用于打开菜单 = style.height: 200px，但是一旦打开菜单，单击按钮不会按预期关闭菜单栏 (style.height: 0)。

任何人也有一些指针，我的代码哪里出错了？

document.getElementById("hamburger").addEventListener("click", toggleNav);

function toggleNav(){
    navSize = document.getElementById("mobilemenu").style.height;
    if (navSize == 200) {
        return close();
    }
    return open();
}
function open() {
        document.getElementById("mobilemenu").style.height = "200px";
}
function close() {
         document.getElementById("mobilemenu").style.height = "0";
}

<div class="menubutton">
  <button id="hamburger" class="hamburger hamburger--collapse" type="button" onclick="toggleNav()">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
  </button>
</div>

【问题讨论】：

您能添加缺少的 html 以使其正常运行吗？

标签： javascript html css

【解决方案1】：

您正在测试 toggleNav() 中的错误值

使用if (navSize == "200px")

【讨论】：

【解决方案2】：

这是错误代码：

    if (navSize == 200) {
      return close();
    }
    return open();

navSize 类似于"200px"，而不是200
由于 if 语句始终为 false，因此它只运行 open()

【讨论】：

【解决方案3】：

您可以使用 classList.toggle

简单地做到这一点

document.getElementById("hamburger").addEventListener("click", function (e) {
e.preventDefault();
  document.getElementById("mobilemenu").classList.toggle('show');
});

.menubutton {
position: fixed;
top:10px;
left:10px;
z-index: 999;
}
#mobilemenu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  transform: translateX(-100%);
  border-right: 1px solid #ccc;
  background-color: #eee;
  transition: transform .3s ease;
}

#mobilemenu.show {
  transform: translateX(0);
}

<div class="menubutton">
  <button id="hamburger" class="hamburger hamburger--collapse" type="button">
          <span class="hamburger-box">
            <span class="hamburger-inner">Click</span>
          </span>
        </button>
</div>
<div id="mobilemenu"></div>

【讨论】：