打开/关闭 sidenav 栏相同的按钮

Question

我有一个按钮，我希望它能打开和关闭侧边导航栏。我的按钮代码是：

 <button class="myBtn" id="myBtn"><i class="glyphicon glyphicon-info-sign"></i></button>

我正在尝试使用 addEventListener 并认为我可能在此缺少 if 语句，但不能确定：

 document.getElementById("myBtn").addEventListener("click", open);
    function open() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
document.getElementById("myBtn").addEventListener("click", close);
    function close() {
         document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        document.body.style.backgroundColor = "white";
}

有什么建议么？谢谢！

原文由 Dave 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以创建一个 toogleFunction

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

function toggleNav(){
    navSize = document.getElementById("mySidenav").style.width;
    if (navSize == 250) {
        return close();
    }
    return open();
}
function open() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function close() {
         document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        document.body.style.backgroundColor = "white";
}

原文由 Paulo Martins 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这就是我在评论中的意思……

 document.getElementById("myBtn").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("mySidenav").style.width = "250px";
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("mySidenav").style.width = "0";
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}

这是 小提琴

原文由 DIEGO CARRASCAL 发布，翻译遵循 CC BY-SA 3.0 许可协议