尝试用一个按钮打开/关闭一个 div

Question

function openNav() {
    document.getElementById("mySidenav").style.width = "200px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

<div onclick="openNav()" class="minimenubutton"><img src="images/menu.png"/></div>

我正在寻找一种方法，每次单击它时都会更改功能，以便我可以用一个按钮打开我的 div。截至目前，我已将 closeNav 设置为该 div 内的一个按钮，但我只想使用“minimenubutton”来完成所有操作。

我是 Javascript 的新手，所以请放轻松。我查找了开关，但无法弄清楚。

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

Answer 1

您只需要一个带有 2 个条件的函数（if 和 else）；

 function togNav() {
  var nav = document.getElementById("nav");
  if (nav.style.width == '200px') {
    nav.style.width = '0';
    nav.style.opacity = 0;
  } else {
    nav.style.width = "200px";
    nav.style.opacity = 1;
  }
}

 #nav {
  transition: opactity 3s ease-in;
  opacity: 0;
  cursor: pointer;
}

 <p>Click under this paragraph</p>
<nav id="nav" onclick="togNav()" class="minimenubutton">
  <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
</nav>

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

Answer 2

You can check css width of element using getComputedStyle() , toggle 0px , 200px ;设置 overflow 到 hidden 在 #mySidenav css

 #mySidenav {
  display: inline-block;
  width: 0px;
  position: relative;
  overflow: hidden;
}

 <script>
  function toggleNav() {
    var el = document.getElementById("mySidenav");
    el.style.width = window.getComputedStyle(el).width === "0px" ? "200px" : "0px";
  }
</script>
<div id="mySidenav">side nav</div>
<div onclick="toggleNav()" class="minimenubutton">
  <img src="http://lorempixel.com/50/50/nature" />
</div>

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