部分页面addEventListener绑定函数参数为null致汉堡菜单JS失效求助

你的问题核心大概率出在**style.display只能读取内联样式**的局限上，结合部分页面的特殊初始状态导致逻辑失效，以下是具体分析和解决办法：

一、先修复代码硬伤（最可能直接解决问题） #

你当前的代码通过判断userBox.style.display切换状态，但这个属性只能获取元素的内联style属性。如果.wdgt-user-box的初始显示状态是通过CSS类、外部样式表设置的（比如默认display: block但没写在元素的style属性里），那userBox.style.display会是空字符串，第一次执行时会把它设为block，等于没变化，看起来就像点击没反应。

替换成基于CSS类的切换逻辑，比直接操作内联样式更可靠：

修改后的JS代码： #

const userBox = document.querySelector(".wdgt-user-box");
const userBtn = document.querySelector(".wdgt-login");

function toggleUserBox() {
    // 用classList.toggle切换类，无需判断当前状态
    userBox.classList.toggle('wdgt-user-box--active');
}
userBtn.addEventListener("click", toggleUserBox);

对应的CSS补充： #

/* 默认隐藏 */
.wdgt-user-box {
    display: none;
}
/* 激活时显示 */
.wdgt-user-box.wdgt-user-box--active {
    display: block;
}

二、针对失效页面的额外排查点 #

如果上面的修复还没解决，再检查以下几个方向：

• 检查元素匹配是否正确：在失效页面的控制台输入document.querySelectorAll('.wdgt-user-box')和document.querySelectorAll('.wdgt-login')，确认返回的元素数量是1，且是你要操作的目标元素（避免某些页面有重复类名的元素，导致querySelector选到错误对象）。
• 查看事件绑定状态：在Chrome开发者工具的Elements面板选中.wdgt-login元素，切换到「Event Listeners」标签，检查click事件列表里是否有toggleUserBox，有没有其他脚本添加了优先级更高的事件（比如调用stopImmediatePropagation阻止后续事件执行）。
• 确认函数是否被篡改：在失效页面控制台输入toggleUserBox，查看函数体是否和你写的一致，排除其他脚本覆盖或修改这个函数的可能。
• 检查样式冲突：在Elements面板查看.wdgt-user-box的Computed样式，确认display属性是否被其他CSS规则（比如媒体查询、父元素样式）意外覆盖。

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