Query selector选择不可见元素：汉堡菜单点击外区域关闭实现问题

问题根源 #

你原有实现存在几个核心错误导致功能异常：

1. 动态查询.nav-open类时，如果菜单未打开，document.querySelector('.nav-open')会返回null，此时访问menu.style会直接抛出JS错误，阻塞后续逻辑执行
2. 你通过menu.style.display = 'none'直接修改样式，会覆盖CSS类的控制逻辑，后续再点击汉堡图标切换nav-open类也无法让菜单重新显示
3. 点击区域判断逻辑过于粗糙，仅判断目标元素和直接父元素，当点击菜单内部深层子元素（比如导航链接、列表项）时会被误判为外部点击，导致菜单异常关闭
4. CSS代码存在语法错误，位移属性和宽度值配置错误，会导致菜单动画效果异常

修正后的代码 #

JS代码 #

// 提前获取固定DOM元素，避免重复查询
const navContainer = document.querySelector('.nav-container')
const menuIcon = document.querySelector('#menu-icon')
const closeBtn = document.querySelector('#close')

// 汉堡图标切换菜单
menuIcon.addEventListener('click', function(e) {
    // 阻止事件冒泡，避免触发窗口的关闭逻辑
    e.stopPropagation()
    navContainer.classList.toggle('nav-open')
})

// 关闭按钮切换菜单
closeBtn.addEventListener('click', function() {
    navContainer.classList.remove('nav-open')
})

// 点击/触摸外部关闭菜单的处理函数
function closeMenuOutside(e) {
    // 菜单未打开直接返回
    if (!navContainer.classList.contains('nav-open')) return
    // 点击区域在菜单内部，直接返回
    if (navContainer.contains(e.target)) return
    // 点击的是汉堡图标，直接返回（已经单独处理切换逻辑）
    if (menuIcon.contains(e.target)) return
    // 移除打开类关闭菜单
    navContainer.classList.remove('nav-open')
}

// 同时绑定鼠标点击和触摸结束事件，兼容移动端
window.addEventListener('mouseup', closeMenuOutside)
window.addEventListener('touchend', closeMenuOutside)

CSS修正部分 #

你原有CSS中菜单的位移和宽度配置错误，替换为以下对应配置即可：

.nav-container {
    position:absolute;
    top:0px;
    left:0;
    width: 340px;
    height:100%;
    background-color:#000;
    /* 水平位移到屏幕外，不需要改left属性 */
    transform: translateX(-340px);
    transition: all 0.5s;
}

.nav-open {
    /* 只需要重置位移即可，其他属性和.nav-container重复，不需要重复写 */
    transform: translateX(0);
}

优化说明 #

• 提前缓存固定DOM元素，避免重复查询DOM提升性能
• 改用类名切换控制菜单显隐，和你原有控制逻辑保持一致，不会出现样式冲突
• 使用contains方法判断点击区域，覆盖菜单内部所有层级的元素，不会出现误关情况
• 同时支持鼠标点击和触摸操作，兼容PC和移动端
• 简化CSS代码，去掉重复属性，修正位移逻辑，动画效果更流畅

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