在Javascript中通过改变样式来切换菜单

Question

我想给菜单添加一个切换功能。

我正试图通过改变Javascript菜单的样式来做到这一点，如下所示。

它似乎工作时，我点击打开菜单，但它不工作，关闭菜单。

let toogleNavStatus = false;
let toogleNav = function(){
let getSidebar = document.querySelector(".nav-links");
if (toogleNavStatus === false) {
getSidebar.style.visibility = "visible";
toogleNavStatus === true;
}
else if (toogleNavStatus === true) {
getSidebar.style.visibility = "hidden";
toogleNavStatus === false;
}
}

有人能帮我弄清楚这个代码的问题是什么吗?

下面是HTML

<nav class="nav-bar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="logo" />
</a>
<button type="button" class="btn nav-btn">
<i class="fas fa-bars" onclick="toogleNav()"></i>
</button>
</div>
<div class="nav-links">
<a href="index.html" class="nav-link">Home</a>
<a href="#" class="nav-link">All</a>
<a href="#" class="nav-link">Contacts</a>
<div class="nav-link nav-social">
<a href="https://www.instagram.com/">
<i class="fab fa-instagram"></i
></a>
</div>
</div>
</div>
</nav>

谢谢

Answer 1

你没有在JS中为toogleNavStatus分配一个新的状态。

应该是

toogleNavStatus = true;
toogleNavStatus = false;

不

toogleNavStatus === true; 
toogleNavStatus === false;

=赋值，==和===比较。