实现点击导航栏外部关闭功能后navToggle切换失效问题求助

问题根因 #

该问题由事件冒泡机制导致：
点击.nav-toggle按钮时，会先触发按钮绑定的点击事件，给.main-nav切换添加active类；随后点击事件向上冒泡到window对象，触发window绑定的全局点击事件。你的全局点击判断逻辑未排除.nav-toggle元素，会判定当前点击不属于导航区域，直接移除刚添加上的active类，最终表现为切换功能失效。

修正方案 #

需要做两处调整：

• 在.nav-toggle的点击事件中添加阻止冒泡逻辑，避免点击按钮的事件传递到window
• 优化全局点击的判断逻辑，使用closest方法替代matches，防止点击导航内部子元素时误触发关闭操作

修正后完整JS代码 #

const navTransition = () => {
    const navToggle = document.querySelector('.nav-toggle');
    const mainNav = document.querySelector('.main-nav');
    const navLinks = document.querySelectorAll('.nav-links');

    navToggle.addEventListener('click', function (e) {
        // 阻止事件冒泡到window
        e.stopPropagation();
        mainNav.classList.toggle('active');
    });

    window.addEventListener('click', function (evt) {
        // 判断点击是否在导航按钮或者导航区域内部
        const isClickNavToggle = evt.target.closest('.nav-toggle');
        const isClickInsideNav = evt.target.closest('.main-nav');
        if (!isClickNavToggle && !isClickInsideNav) {
            mainNav.classList.remove('active');
        };
    });
};

navTransition();

逻辑说明 #

Element.closest()方法会从当前元素开始向上层查找，直到找到匹配指定选择器的祖先元素，相比matches只能匹配当前点击元素的逻辑，更适配导航内部存在多层子元素的场景，避免点击导航内的<li>、图标等元素时误触发关闭。

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