JavaScript汉堡菜单onClick仅生效一次问题排查求助

你的代码核心问题出在NodeList的length属性调用方式错误：

querySelectorAll(".nav-sidebar a")返回的是NodeList对象，它的length是一个属性而非方法。你在两处写了getSidebarLinks.length()，这种写法会直接抛出TypeError: getSidebarLinks.length is not a function的异常。

第一次点击时，代码执行到let arrayLength = getSidebarLinks.length();就报错中断了，后面的toggleNavStatus = true根本没机会执行，导致toggleNavStatus始终保持初始的false状态。第二次点击时，逻辑自然只会重复进入if分支，完全触发不了收起菜单的else分支。

修复后的JavaScript代码 #

let toggleNavStatus = false;
// 把DOM查询移到函数外，避免每次点击重复查询DOM
const getSidebar = document.querySelector(".nav-sidebar");
const getSidebarUl = document.querySelector(".nav-sidebar ul");
const getSidebarTitle = document.querySelector(".nav-sidebar span");
const getSidebarLinks = document.querySelectorAll(".nav-sidebar a");

let toggleNav = function() {
    if (toggleNavStatus === false){
        getSidebarUl.style.visibility = "visible";
        getSidebar.style.width = "272px";
        getSidebarTitle.style.opacity = "0.5";

        // 修复length调用：去掉括号，直接访问属性
        const arrayLength = getSidebarLinks.length;
        for(let i = 0; i < arrayLength; i++){
            getSidebarLinks[i].style.opacity = "1";
          }

        toggleNavStatus = true;

    } else {
        getSidebar.style.width = "50px";
        getSidebarTitle.style.opacity = "0";

        // 同样修复length调用
        const arrayLength = getSidebarLinks.length;
        for(let i = 0; i < arrayLength; i++){
            getSidebarLinks[i].style.opacity = "0";
        }

        getSidebarUl.style.visibility = "hidden";

        toggleNavStatus = false;
    }
}

额外优化建议 #

1. 用CSS类切换替代直接操作style：把展开/收起的样式封装成CSS类（比如.sidebar-expanded），然后通过getSidebar.classList.toggle("sidebar-expanded")实现切换，代码会更简洁，样式维护也更方便。
2. 简化条件判断：因为toggleNavStatus只有true和false两种状态，直接用else替代else if即可，没必要多此一举。
3. 避免重复DOM查询：将DOM元素的查询放在函数外部，只执行一次，能有效提升点击响应性能。

内容的提问来源于stack exchange，提问作者Peter Cloutier-Jabalee