Question

我的javascript只工作一次。已经有这样的问题，但是仍然无法解决这个简单的问题。

我想更改visibility: hidden; -> visibility: visible;，反之亦然。

let toggleNavStatus = false;

function toggleNav() {
  let getSidebar = document.querySelector(".nav-sidebar");

  if (toggleNavStatus === false) {
    getSidebar.style.visibility = "visible";
    let toggleNavStatus = true;
  } else if (toggleNavStatus === true) {
    getSidebar.style.visibility = "hidden";
    let toggleNavStatus = false;
  }
}

.nav-sidebar {
  width: 250px;
  height: 70vh;
  background-color: #1b1b1b;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

<a href=# onclick="toggleNav()">button</a>

<aside class="nav-sidebar">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>

请参见fiddle （实际上它不是在摆弄吗？）

Answer 1

您的问题是您要在toggleNavStatus语句中重新声明if。当在if语句中使用let时，是指toggleNavStatus语句中的新变量if（即局部变量），而不是在变量开头声明的变量。您的功能，因此不会改变。

请参见下面的工作示例：

let toggleNavStatus = false;

function toggleNav() {
  let getSidebar = document.querySelector(".nav-sidebar");

  if (toggleNavStatus === false) {
    getSidebar.style.visibility = "visible";
    toggleNavStatus = true;
  } else if (toggleNavStatus === true) {
    getSidebar.style.visibility = "hidden";
    toggleNavStatus = false;
  }
}

.nav-sidebar {
  width: 250px;
  height: 70vh;
  background-color: #1b1b1b;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

<a href=# onclick="toggleNav()">button</a>

<aside class="nav-sidebar">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>
</aside>

Answer 2

let toggleNavStatus = true;

您要创建一个具有相同名称的新 local 变量并进行设置。

您永远不会更改全局变量的值，因此，当您第二次测试if (toggleNavStatus === false)时，它仍然是 false。

Answer 3

您不会更改全局范围内声明的toggleNavStatus，而是在if块内创建一个新变量。不要在if块中再次使用let

let toggleNavStatus = false;

function toggleNav() {
let getSidebar = document.querySelector(".nav-sidebar");

  if (toggleNavStatus === false) {
    getSidebar.style.visibility = "visible";
    toggleNavStatus = true;
  }
   else if (toggleNavStatus === true){
    getSidebar.style.visibility = "hidden";
    toggleNavStatus = false;
  }
}

.nav-sidebar{
  width: 250px;
  height: 70vh;
  background-color: #1b1b1b;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

<a href=# onclick="toggleNav()">button</a>

<aside class="nav-sidebar">
    <ul>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
   </ul>

Answer 4

更正的代码：

let toggleNavStatus = false;

function toggleNav() {
let getSidebar = document.querySelector(".nav-sidebar");

  if (toggleNavStatus === false) {
    getSidebar.style.visibility = "visible";
    toggleNavStatus = true;
  }
   else if (toggleNavStatus === true){
    getSidebar.style.visibility = "hidden";
    toggleNavStatus = false;
  }
}

.nav-sidebar{
  width: 250px;
  height: 70vh;
  background-color: #1b1b1b;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

<a href=# onclick="toggleNav()">button</a>

<aside class="nav-sidebar">
    <ul>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
   </ul>

Answer 5

我认为您应该创建 visible 类，并且比起javascript，您应该检查该类是否存在，因此基本上可以切换类

howto_js_toggle_class.asp

Answer 6

删除if条件。因为您每次都声明为新变量

let toggleNavStatus = false;

function toggleNav() {
let getSidebar = document.querySelector(".nav-sidebar");

  if (toggleNavStatus === false) {
    getSidebar.style.visibility = "visible";
     toggleNavStatus = true;
  }
   else if (toggleNavStatus === true){
    getSidebar.style.visibility = "hidden";
     toggleNavStatus = false;
  }
}

.nav-sidebar{
  width: 250px;
  height: 70vh;
  background-color: #1b1b1b;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

<a href=# onclick="toggleNav()">button</a>

<aside class="nav-sidebar">
    <ul>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
   </ul>

Answer 7

您要在条件语句中重新声明toggleNavStatus，这不会更新全局toggleNavStatus。

在您的if / else条件下，只需删除let。

let toggleNavStatus = false;

function toggleNav() {
let getSidebar = document.querySelector(".nav-sidebar");

  if (toggleNavStatus === false) {
    getSidebar.style.visibility = "visible";
    toggleNavStatus = true;
  }
   else if (toggleNavStatus === true){
    getSidebar.style.visibility = "hidden";
    toggleNavStatus = false;
  }
}

.nav-sidebar{
  width: 250px;
  height: 70vh;
  background-color: #1b1b1b;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

<a href=# onclick="toggleNav()">button</a>

<aside class="nav-sidebar">
    <ul>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
   </ul>

if，否则if-javascript函数只能运行一次

7 个答案: