Bootstrap折叠侧边栏异常：点击非按钮区域自动重展求助

问题描述 #

实现了Bootstrap折叠侧边栏，点击触发按钮可展开，点击侧边栏和按钮之外区域能隐藏，但再次点击按钮外元素时，侧边栏会自动重新展开；尝试用style.display = none隐藏后，无法用style.display = block重新展开。

原因分析 #

1. 每次调用展开/关闭函数都新建bootstrap.Collapse实例，导致组件状态管理混乱，多次实例化会触发不必要的状态切换。
2. 触发按钮是<a>标签，点击时未阻止默认跳转行为（href="#"），可能干扰组件状态。
3. window点击事件仅判断e.target.id，但点击侧边栏或按钮内部子元素时，e.target.id不是目标ID，会误触发关闭逻辑，同时重复创建实例导致展开。

修复后的完整代码 #

触发按钮代码 #

<a class="btn btn-tocanvas-report" href="#" id="btnOpenSidebarListMenuReport" role="button" aria-controls="listMenuReport">
  <span><i class="bi bi-list"></i>Open List Report</span>
</a>

折叠侧边栏代码 #

<div class="collapse body-menu-report-nav" id="listMenuReport">
    <ul class="ul-menu-report-nav">
        <li class="li-menu-report-nav">
          <a href="index.php?page=report&report=curloc_report" class="navbar-listmenureport-link">
          <i class="bi bi-geo"></i>
          <span>Current Location</span></a>
        </li>
    </ul>
</div>

逻辑脚本代码 #

<script>
  // 只创建一次Collapse实例，复用状态
  const listMenuReport = document.getElementById("listMenuReport");
  const btnOpenSidebarListMenuReport = document.getElementById("btnOpenSidebarListMenuReport");
  const bsCollapse = new bootstrap.Collapse(listMenuReport, { toggle: false }); // 初始化时不自动切换

  // 按钮点击事件：切换侧边栏状态
  btnOpenSidebarListMenuReport.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    bsCollapse.toggle(); // 切换展开/隐藏状态
  });

  // 点击外部区域关闭侧边栏
  window.addEventListener('click', (e) => {
    // 判断点击元素是否属于侧边栏或触发按钮
    const isClickInsideSidebar = listMenuReport.contains(e.target);
    const isClickOnButton = btnOpenSidebarListMenuReport.contains(e.target);
    
    if (!isClickInsideSidebar && !isClickOnButton && bsCollapse._isShown) {
      bsCollapse.hide();
    }
  });

  // 侧边栏内部点击不关闭（可选，已通过contains判断覆盖）
  $('#listMenuReport').on('click', function (e) {
    e.stopPropagation();
  });
</script>

CSS样式代码 #

.body-menu-report-nav {
  font-size: 14px;
  background-color:#080a70;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 180px;
  transition: none;
  color: #fff;
  z-index: 10;
  align-items: stretch;
  box-shadow: -5px 0px 10px 1px #c7c7c7;
}

关键修复点 #

• 复用Collapse实例：只初始化一次bootstrap.Collapse，避免多次实例化导致的状态冲突。
• 阻止按钮默认行为：用e.preventDefault()阻止<a>标签的跳转，避免干扰组件状态。
• 优化外部点击判断：用contains()方法检测点击元素是否属于侧边栏或按钮，覆盖子元素点击的情况，避免误判。
• 使用toggle方法：按钮点击直接调用toggle()，简化展开/隐藏逻辑，无需分开写open/close函数。

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