使用相同的按钮打开和关闭菜单（关闭不起作用）

Question

我正在尝试制作一个覆盖菜单，通过单击同一菜单打开和关闭。我已经尝试使用我在这个论坛上看到的一些解决方案，但我目前拥有的代码只能打开菜单而不能关闭它？

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

function toggleNav(){
    navSize = document.getElementById("myNav").style.width;
    if (navSize == 20) {
        return close();
    }
    return open();
}
function open() {
        document.getElementById("myNav").style.width = "20%";
}
function close() {
         document.getElementById("myNav").style.width = "0";
}

这是fiddle：https://jsfiddle.net/Santos1600/j2L7yga5/1/

我已经在使用不同的按钮关闭菜单时让菜单正常工作，但从设计的角度来看，如果同一个按钮在单击时执行这两个操作，我会更喜欢它。

Answer 1

宽度计算有误

function toggleNav() {
 navSize = document.getElementById("myNav").offsetWidth;
 if (navSize > 0) {
  return close();
 }
  return open();
}

如果您需要在点击不同条目后将其关闭你有两个选择： 1) 如果您单击任何 link 只需添加

即可关闭菜单

onclick="toggleNav();"

到特定的 link。

2) 或者以更通用的方式，在 link 上添加一个 class ex "mylink"

和

document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'mylink') {
   toggleNav();
}
}, false);

在您的代码中

Answer 2

试试这个：https://jsfiddle.net/reyq2064/

// document.getElementById("botaomenu").addEventListener("click", toggleNav);

function toggleNav() {
   navSize = document.getElementById("myNav").style.width;
   if (navSize == '20%') {
      return close();   
   }
   return open();
}

使用相同的按钮打开和关闭菜单（关闭不起作用）

Open & Close Menu with the same button (Closing not working)

html

javascript

css

menu

function