如何实现点击页面任意位置关闭移动端导航菜单？

要实现点击屏幕别处关菜单其实很简单，核心就是监听文档的点击事件，排除汉堡按钮和导航菜单本身的点击，剩下的点击就触发关闭逻辑。

修改后的完整代码 #

// media query nav etc
const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
    
    // 汉堡图标点击逻辑（保留原功能）
    burger.addEventListener('click', (e) => {
        // 阻止事件冒泡，避免触发文档的点击关闭
        e.stopPropagation();
        nav.classList.toggle('nav-active');
        
        navLinks.forEach((link, index) => {
            link.style.animation = link.style.animation ? '' : `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`;
        });
        burger.classList.toggle('toggle');
    });

    // 点击导航菜单内部时，也阻止事件冒泡
    nav.addEventListener('click', (e) => {
        e.stopPropagation();
    });

    // 监听整个文档的点击
    document.addEventListener('click', () => {
        // 只有菜单处于激活状态时才关闭
        if (nav.classList.contains('nav-active')) {
            nav.classList.remove('nav-active');
            // 清除链接的动画效果
            navLinks.forEach(link => link.style.animation = '');
            // 把汉堡图标恢复原样
            burger.classList.remove('toggle');
        }
    });
}

// 记得调用初始化函数
navSlide();

关键细节说明 #

• 用e.stopPropagation()阻止汉堡和导航内部的点击事件冒泡到文档，不然点击菜单里的链接或者汉堡时，会触发文档的关闭逻辑，导致菜单刚打开就关掉
• 文档点击事件里先判断菜单是否激活，避免每次点击文档都执行关闭操作，节省性能
• 关闭菜单时要同步清除链接动画和汉堡图标的toggle类，保证状态和点击汉堡关闭时一致

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