点击NavLink时关闭Bootstrap Offcanvas菜单的JS解决方案求助

要解决点击导航锚点后Offcanvas侧边菜单不关闭的问题，直接利用Bootstrap官方提供的Offcanvas实例API即可实现，以下是具体代码：

document.addEventListener('DOMContentLoaded', function() {
  // 获取你的Offcanvas容器元素（替换成你实际的ID）
  const offcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasExample'));
  
  // 选中侧边栏内所有导航链接
  document.querySelectorAll('.offcanvas-body .nav-link').forEach(link => {
    link.addEventListener('click', () => {
      // 调用hide方法关闭侧边菜单
      offcanvas.hide();
    });
  });
});

关键说明： #

• 确保替换代码中的offcanvasExample为你实际使用的Offcanvas元素ID
• 必须提前引入Bootstrap的JS文件（Offcanvas组件依赖其核心JS）
• 点击事件绑定在DOM加载完成后执行，避免找不到元素的问题
• 该方法不会影响锚点跳转的默认行为，关闭菜单和滚动到锚点会同时完成

如果之前的点击事件未生效，大概率是因为没有正确初始化Bootstrap的Offcanvas实例，或者事件绑定时机过早（DOM还未加载完成）。

内容的提问来源于stack exchange，提问作者Elia d'Albenzio