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

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