点击侧边栏链接无法关闭带data-toggle="offcanvas"的导航栏求助

不用collapse组件的话，我们可以直接复用你现有的切换按钮逻辑，或者直接操作控制侧边栏显示的样式类来实现需求，下面是两种实用的方案：

方案1：复用切换按钮的点击逻辑 #

这个方案最省心，因为它直接调用你已经写好的侧边栏切换逻辑，不需要重新写一遍收起的代码：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取切换按钮元素
  const sideBtn = document.getElementById('sideBtn');
  // 获取侧边栏内所有的链接（替换成你实际的侧边栏链接选择器，比如.sidebar-nav a）
  const sidebarLinks = document.querySelectorAll('.sidebar a');

  // 给每个链接绑定点击事件
  sidebarLinks.forEach(link => {
    link.addEventListener('click', function() {
      // 模拟手动点击切换按钮，触发侧边栏收起
      sideBtn.click();
    });
  });
});

为什么这个方案有效？ #

你的切换按钮已经实现了完整的侧边栏展开/收起逻辑，我们只是在点击链接时“帮用户点一下这个按钮”，完全复用现有逻辑，不会引入新的bug。

方案2：直接操作侧边栏的样式类 #

如果你的侧边栏是通过添加/移除CSS类来控制显示隐藏（比如给侧边栏容器加active类显示，移除则隐藏），可以直接操作这些类：

document.addEventListener('DOMContentLoaded', function() {
  // 获取侧边栏容器（替换成你实际的侧边栏容器选择器）
  const sidebar = document.querySelector('.offcanvas-sidebar');
  // 获取侧边栏内所有链接
  const sidebarLinks = document.querySelectorAll('.offcanvas-sidebar a');

  sidebarLinks.forEach(link => {
    link.addEventListener('click', function() {
      // 移除展开状态的类，收起侧边栏
      sidebar.classList.remove('active');
      // 如果你的页面内容区域有对应的布局类（比如body的.sidebar-open），也要同步移除
      document.body.classList.remove('sidebar-open');
    });
  });
});

处理动态生成的链接 #

如果你的侧边栏链接是通过JavaScript动态生成的（比如异步加载的菜单），上面的直接绑定事件会失效，这时候用事件委托更靠谱：

document.addEventListener('DOMContentLoaded', function() {
  const sideBtn = document.getElementById('sideBtn');
  // 获取侧边栏的父容器
  const sidebarContainer = document.querySelector('.sidebar-container');

  // 给父容器绑定点击事件，判断点击的是链接
  sidebarContainer.addEventListener('click', function(e) {
    if (e.target.tagName === 'A') {
      sideBtn.click();
    }
  });
});

这样不管链接是静态还是动态生成的，只要点击的是侧边栏里的链接，都会触发收起逻辑。

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