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）;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用css检查元素的width getComputedStyle()，切换0px，200px;在overflow hidden

将#mySidenav设置为css

＆＃13;

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

＆＃13;

<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>

＆＃13;

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";
}

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

5 个答案: