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

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

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

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/

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

宽度计算有误

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);

在您的代码中

试试这个: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();
}