移动菜单切换按钮不关闭

Question

我的 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>

Answer 1

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

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

Answer 2

这是错误的代码：

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

navSize 将类似于"200px" ，而不是200
由于 if 语句总是假的，它只运行open()

Answer 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>