无法获取切换函数(JavaScript工作）

Cannot get toggle function (JavaScript to work)

本文关键字：JavaScript 工作 函数 获取      更新时间：2023-09-26

我正在尝试使用JavaScript而不是jQuery构建一个简单的切换按钮，以来回转换元素。作为一名JavaScript新手，我尽了最大的努力，但无法理解。其主要思想是，当单击按钮时，侧菜单应从侧面显示，当再次单击时应隐藏回同一位置。请帮忙。

function toggleNavBar() {
  var nav = document.getElementById("sideNav"),
    button = document.getElementById("checkButton"),
    check = "hidden";
  if (check == "hidden") {
    nav.style.transform = "translate(0px)";
    check = "shown";
  } else if (check == "shown") {
    nav.style.transform = "translate(-290px)";
    check = "hidden";
  }
}
body {
  margin: 0 auto;
  padding: 0;
}
#sideNav {
  background-color: #96e6b3;
  display: inline-block;
  width: 20%;
  position: fixed;
  height: 100vh;
  z-index: 2;
  overflow: hidden;
  -webkit-transform: translate(-290px);
  /* Safari */
  transform: translate(-290px);
  */
}
nav ul {
  list-style-type: none;
  font-family: Junction, "Times New Roman", sans-serif;
  font-size: 1.9em;
  margin-top: 24%;
}
nav ul li {
  margin-top: 1%;
  padding-top: 4.7%;
  margin-left: -50px;
  text-align: center;
}
nav a {
  text-decoration: none;
  color: #000000;
}
nav li:hover {
  background-color: #34cf6d;
}
<!doctype html>
<html lang="en">
<head>
  <title>Check</title>
  <meta charset="UTF-8">
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="font.css" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="styleCheck.css">
  <style>
    <!--very specific small CSS for this document--> #toggler {
      text-decoration: underline;
    }
    #toggler:hover {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>
    <div class="o-content">
      <div class="o-container">
        <div class="o-grid">
          <button id="checkButton" class="c-hamburger c-hamburger--htx" onclick="toggleNavBar()">
            <span>toggle menu</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div id="sideNav">
    <nav>
      <ul>
        <li><a href="indexCheck.htm">Home</a>
        </li>
        <li><a href="items.htm">Items</a>
        </li>
        <li><a href="XML.htm">XML</a>
        </li>
      </ul>
    </nav>
  </div>
  <!--side Nav-->
</body>
</html>

您应该只声明一次check变量：

var check = "hidden";
function toggleNavBar() {
    var nav = document.getElementById("sideNav"),
        button = document.getElementById("checkButton");
    if (check == "hidden") {
        nav.style.transform = "translate(0px)";
        check = "shown";
    } else if (check == "shown") {
        nav.style.transform = "translate(-290px)";
        check = "hidden";
    }
}

一些优化（假设这是在文档准备好后完成的）：

var toggleNavBar = (function() {
    var check = "hidden";
    var nav = document.getElementById("sideNav");
    var button = document.getElementById("checkButton");
    return function() {
        if (check == "hidden") {
            nav.style.transform = "translate(0px)";
            check = "shown";
        } else {
            nav.style.transform = "translate(-290px)";
            check = "hidden";
        }
    }
})();
相关文章：