Bootstrap5实现点击导航链接或页面外部时关闭导航菜单

你需要的两个交互效果都可以通过 Bootstrap 5 原生的 Collapse 组件 API 实现，无需引入额外依赖，也不会影响原有锚点跳转的正常逻辑，具体实现步骤如下：

1. 点击导航内链接自动收起菜单 #

实现逻辑：获取折叠菜单的 Collapse 实例，给菜单内所有可点击的跳转元素绑定点击事件，菜单处于展开状态时调用实例的hide()方法即可。

将以下JS代码放在页面</body>标签前，或者放在DOMContentLoaded事件回调中执行：

document.addEventListener('DOMContentLoaded', function() {
  // 获取导航折叠面板元素
  const navCollapseEl = document.querySelector('#navbarNav');
  // 获取/初始化折叠组件实例，初始化时不触发自动切换
  const navCollapse = bootstrap.Collapse.getOrCreateInstance(navCollapseEl, { toggle: false });

  // 选中折叠面板内所有可点击的导航元素：包含导航链接、Download CV按钮
  const clickableEls = navCollapseEl.querySelectorAll('.nav-link, .top-btn');
  clickableEls.forEach(el => {
    el.addEventListener('click', () => {
      // 仅当菜单处于展开状态时执行收起
      if (navCollapseEl.classList.contains('show')) {
        navCollapse.hide();
      }
    })
  })

2. 点击菜单外部区域自动收起菜单 #

实现逻辑：监听全局点击事件，判断点击目标不在导航栏容器范围内、且菜单处于展开状态时，触发折叠收起逻辑。直接在上述DOMContentLoaded回调内追加以下代码即可：

// 监听全局点击，处理外部点击关闭逻辑
  document.addEventListener('click', (e) => {
    // 菜单未展开时直接跳过逻辑
    if (!navCollapseEl.classList.contains('show')) return;
    // 获取导航栏根容器
    const navbarEl = document.querySelector('.navbar');
    // 点击目标不在导航栏内部时收起菜单
    if (!navbarEl.contains(e.target)) {
      navCollapse.hide();
    }
  })
})

补充说明 #

• 上述逻辑只会在导航折叠菜单处于展开状态（一般是移动端视口场景）时触发，在lg及以上断点、导航默认平铺展示时不会执行任何多余操作，不影响桌面端体验
• 如果后续在折叠面板内新增其他可点击元素（如下拉选项、功能按钮），只需要把元素对应的选择器追加到querySelectorAll('.nav-link, .top-btn')的参数中，即可实现点击对应元素也自动收起菜单
• 原生锚点跳转是浏览器默认行为，上述JS不会阻止事件冒泡或默认行为，点击链接后会正常滚动到对应目标区块

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