javascript - 导航开关无法正常工作

Question

我有这段代码，点击这个银色 block 应该切换导航栏。它确实触发一次并且不会第二次尝试将导航栏切换回来。我假设这段代码有一些小错误，但我找不到什么。

这是代码。

function toggleNav() {
  var navStatus = true;
  if (navStatus == true) {
    document.getElementById("closenav").style.left = "-300px";
    navStatus = false;
  } else if (navStatus == false) {
    document.getElementById("closenav").style.left = "0px";
    navStatus = true;
  }
}

nav {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 300px;
  background-color: #272727;
  transition: all ease-in-out 200ms;
}

nav div {
  position: fixed;
  top: 40px;
  left: 40px;
  width: 60px;
  height: 60px;
  background-color: silver;
}

<nav id="closenav">
  <div onclick="toggleNav()"> </div>
</nav>

Answer 1

您需要在 toggleNav() 函数之外定义您的变量 var navStatus = true 否则您的变量 navStatus 值将始终为 true 每次点击都在您的函数的第一行声明...也只需使用 else 而不是 else if

var navStatus = true;
function toggleNav() {
  if (navStatus == true) {
    document.getElementById("closenav").style.left = "-300px";
    navStatus = false;
  } else {
    document.getElementById("closenav").style.left = "0px";
    navStatus = true;
  }
}

nav {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 300px;
  background-color: #272727;
  transition: all ease-in-out 200ms;
}

nav div {
  position: fixed;
  top: 40px;
  left: 40px;
  width: 60px;
  height: 60px;
  background-color: silver;
}

<nav id="closenav">
  <div onclick="toggleNav()"> </div>
</nav>