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

Question

我的Javascript只能运行一次。 已经有这样的问题，但是我不能解决这个简单的问题。

我想更改visibility: hidden; -> visibility: visible; 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> 

看到小提琴 （实际上它在小提琴中不起作用吗？）

Answer 1

您的问题是您toggleNavStatus在if语句中重新声明toggleNavStatus 。 当在if语句中使用let时，是指if语句中的一个新变量toggleNavStatus （即局部变量），而不是您在函数开始时声明的变量，因此它不会更改。

请参见下面的工作示例：

 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; 

您正在创建一个具有相同名称的新局部变量并进行设置。

您永远不会更改全局变量的值，因此，当您if (toggleNavStatus === false)测试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

我认为您应该创建可见的类，而不是使用javascript来检查该类是否存在，因此基本上可以切换类

howto_js_toggle_class.asp

Answer 6

删除let的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>