点击菜单按钮菜单不显示？求助排查JavaScript事件监听问题

核心问题拆解 #

• 事件监听绑定错误：你调用addEventListener时直接执行了menu(event)，这会让函数在页面加载时立刻运行，而非点击事件触发时才执行。正确操作是传递函数引用，不是直接调用函数。
• 命名冲突隐患：变量menu和函数menu同名，虽然JavaScript允许这种写法，但会增加代码混淆度，容易引发意外问题。
• 逻辑判断漏洞：原逻辑里点击菜单自身不会触发关闭，且点击按钮时事件会冒泡到window，导致菜单状态被重复切换，不符合预期。

修复后的代码 #

const menu = document.getElementById("menu-active");
const menuBtn = document.getElementById("menu");

// 重命名函数避免冲突
function toggleMenu(event) {
    // 点击菜单按钮时直接切换状态，并阻止事件冒泡
    if (event.target === menuBtn) {
        menu.style.display = menu.style.display === "none" ? "block" : "none";
        event.stopPropagation();
        return;
    }
    // 点击菜单外部时关闭菜单
    if (!menu.contains(event.target)) {
        menu.style.display = "none";
    }
}

// 传递函数引用，而非直接调用函数
menuBtn.addEventListener("click", toggleMenu);
window.addEventListener("click", toggleMenu);

补充说明 #

• 用menu.contains(event.target)替代原有的父节点判断，能更精准检测点击是否发生在菜单内部（含所有子元素），避免遗漏嵌套元素的情况。
• event.stopPropagation()可以防止点击菜单按钮时，事件冒泡到window触发额外的关闭操作，保证按钮的切换逻辑正常运行。

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