如何实现点击页面非菜单区域关闭导航弹出菜单？

需求说明 #

当前导航菜单可通过点击导航图标切换显示/隐藏，需要新增功能：当菜单处于显示状态时，点击页面任意非菜单区域自动关闭菜单。

完整代码实现 #

1. 补全HTML（含导航触发按钮）

用户提供的菜单代码缺少触发图标，这里补充完整：

<!-- 导航触发按钮 -->
<button class="nav-toggle" id="navToggle">☰</button>

<!-- 用户提供的导航菜单 -->
<ul class="main-nav nav navbar-nav" id="mainNav">
    <li class="active"><a href="/index.html">ГЛАВНАЯ</a></li>
    <li><a href="#">НОВОСТИ</a></li>
    <li><a href="#">СТАТЬИ</a></li>
    <li><a href="#">ВИДЕО</a></li>
    <li><a href="/onas.html">О НАС </a></li>
</ul>

2. CSS样式（控制菜单显示/隐藏）

/* 默认隐藏菜单 */
.main-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 显示菜单的类 */
.main-nav.show {
    display: block;
}

/* 导航触发按钮样式 */
.nav-toggle {
    position: fixed;
    top: 15px;
    right: 15px;
    font-size: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
}

3. JavaScript核心逻辑

// 获取DOM元素
const navToggleBtn = document.getElementById('navToggle');
const mainNavMenu = document.getElementById('mainNav');

// 点击触发按钮切换菜单显示状态
navToggleBtn.addEventListener('click', function(e) {
    // 阻止事件冒泡到document，避免刚打开就关闭
    e.stopPropagation();
    mainNavMenu.classList.toggle('show');
});

// 点击菜单内部时，阻止事件冒泡，防止误关闭
mainNavMenu.addEventListener('click', function(e) {
    e.stopPropagation();
});

// 监听页面全局点击，关闭菜单
document.addEventListener('click', function() {
    // 检查菜单是否处于显示状态
    if (mainNavMenu.classList.contains('show')) {
        mainNavMenu.classList.remove('show');
    }
});

关键逻辑说明 #

• 事件冒泡阻止：在触发按钮和菜单内部的点击事件中调用e.stopPropagation()，避免点击这些区域时，事件传递到document导致菜单被误关闭。
• 类名控制显示：通过切换show类来控制菜单的显示/隐藏，比直接修改style.display更灵活，还能方便添加过渡动画。
• 全局点击监听：监听document的点击事件，只要菜单处于显示状态且点击的不是菜单或触发按钮，就移除show类关闭菜单。

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