尝试一键打开/关闭 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 新手，所以请放轻松。我查找了切换开关，但无法弄清楚。

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>

Answer 2

您可以使用getComputedStyle()、切换0px、200px 来检查元素的css width；将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>

Answer 3

如果布局允许，您也可以使用checkbox + div 实现此目的。完全没有 Javascript。

input.toggler { display: none; }
input.toggler + label + div { display: none; }
input.toggler:checked + label + div { display: block; }

<input type=checkbox id=sometoggler class=toggler />
<label for=sometoggler>open/close</label>
<div>content to show / hide </div>

Answer 4

function toggleNav() {
    var el = document.getElementById("mySidenav");
    if(el.style.width == "200px"){
        el.style.width = "0px";
    } else {
        el.style.width = "200px";
    }
}

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

Answer 5

首先检查元素的宽度。如果元素的宽度为 200px，则将其设置为 0px，但如果不是 200px，则必须为 0px；所以设置宽度为200px。

function togNav() {
    var e = document.getElementById("mySidenav");
    if (e.style.width == "200px") ? e.style.width = "0px" : e.style.width = "200px";
}