如何实现点击Navbar外部及导航链接时自动关闭导航栏

原代码问题点 #

• 点击区域判断逻辑完全错误：e.target.querySelector是DOM方法，直接将方法本身和选择器字符串做相等判断，判断条件永远成立，根本无法区分点击区域
• 未阻止汉堡按钮点击事件冒泡，点击按钮时会先触发展开/收起切换，事件冒泡到document后又会立刻触发关闭逻辑，导致按钮点击失效
• 缺少点击导航内部链接自动收起导航的逻辑
• 未同步关联checkbox的选中状态，会导致汉堡按钮样式（比如三条杠转叉的动画）和导航展开状态不匹配

修复后完整实现代码 #

<input type="checkbox" id="menu-bars">
<label for="menu-bars" class="nav-button" id="nav-button">
    <span></span>
    <span></span>
    <span></span>
</label>
<nav class="navbar">
    <!-- 导航链接区域 -->
    <a href="#home">首页</a>
    <a href="#about">关于</a>
    <a href="#projects">项目</a>
    <a href="#contact">联系</a>
</nav>
<script>
    const NavBtn = document.querySelector(".nav-button");
    const NavShow = document.querySelector(".navbar");
    const menuCheckbox = document.querySelector("#menu-bars");

    // 汉堡按钮切换导航展开/收起
    NavBtn.addEventListener("click", function(e){
        e.stopPropagation(); // 阻止事件冒泡，避免触发全局关闭逻辑
        NavShow.classList.toggle("slide");
        menuCheckbox.checked = NavShow.classList.contains("slide"); // 同步checkbox状态，匹配按钮样式
    })

    // 点击导航外部区域关闭导航
    document.addEventListener("click", function(e){
        const isClickInsideNav = NavShow.contains(e.target);
        const isClickNavBtn = NavBtn.contains(e.target);
        // 既没点导航内部，也没点汉堡按钮时，关闭导航
        if(!isClickInsideNav && !isClickNavBtn){
            NavShow.classList.remove("slide");
            menuCheckbox.checked = false;
        }
    })

    // 点击导航内部链接自动关闭导航
    const navLinks = NavShow.querySelectorAll("a");
    navLinks.forEach(link => {
        link.addEventListener("click", function(){
            NavShow.classList.remove("slide");
            menuCheckbox.checked = false;
        })
    })
</script>

关键逻辑说明 #

• 用原生Node.contains()方法判断点击目标是否在指定元素内部，是判断点击区域最稳定可靠的方案，不需要自己写复杂的选择器匹配
• 点击汉堡按钮时加e.stopPropagation()阻止事件冒泡，避免刚展开就被全局关闭逻辑收回
• 所有关闭/展开操作都同步checkbox的checked状态，避免汉堡按钮的CSS动画样式和实际导航状态错位

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