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

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";}这是小提琴：https://jsfiddle.net/Santos1600/j2L7yga5/1/我已经让菜单在使用不同的按钮关闭菜单时工作，但是从设计的角度来看，如果同一个按钮在单击时执行这两个操作，我更喜欢它。

Answer 1

宽度计算中存在错误

function toggleNav() {

 navSize = document.getElementById("myNav").offsetWidth;

 if (navSize > 0) {

  return close();

 }

  return open();

}

如果您需要在单击不同的条目后关闭它，您有2个选项：1）如果您单击任何链接，只需添加

onclick="toggleNav();"

到特定链接。

2）或者以更通用的方式，在链接上添加一个类，例如“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();

}