JavaScript修改样式实现菜单切换可打开但无法关闭如何解决

核心问题原因 #

你代码中对状态变量toogleNavStatus的修改使用了相等比较运算符===，而非赋值运算符=，导致状态值从未被真正更新：第一次点击后toogleNavStatus一直停留在初始值false，所以永远只会执行显示菜单的逻辑，无法触发隐藏逻辑。

修复后的完整JS代码 #

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;
  }
}

可选优化方案 #

可以简化冗余的判断逻辑，同时把DOM查询提前，避免每次点击都重复查询DOM节点，性能更好：

let toogleNavStatus = false;
// 提前查询侧边栏DOM，仅执行一次
const getSidebar = document.querySelector(".nav-links");

function toogleNav() {
  // 直接翻转状态，不用多分支判断
  toogleNavStatus = !toogleNavStatus;
  getSidebar.style.visibility = toogleNavStatus ? "visible" : "hidden";
}

另外建议把onclick="toogleNav()"属性从<i>标签移到外层的<button>标签上，避免点击按钮边缘时没有命中i标签，导致点击失效。

内容的提问来源于stack exchange，提问作者haashe