如何通过URL自动展开Bootstrap 4嵌套Collapse折叠面板

算力阿峰

2026-9-28

实现思路

你的活动折叠项本身是嵌套在对应日期的.collapse容器内的，只要先找到活动所属的外层折叠容器，按「先展开外层日期→再展开内层活动」的顺序触发即可，同时为了避免滚动位置计算错误，要等折叠动画完成后再执行滚动定位。

代码实现

替换你原有JS代码为以下内容即可：

jQuery($ => {
  if (window.location.hash) {   
    const hash = window.location.hash;
    const $eventCollapse = $(hash);
    // 校验目标活动折叠项是否存在
    if ($eventCollapse.length) {
      // 找到活动所属的外层日期折叠容器
      const $dayCollapse = $eventCollapse.parents('.collapse').first();
      // 监听外层折叠完成事件
      $dayCollapse.one('shown.bs.collapse', () => {
        // 外层展开后再展开内层活动
        $eventCollapse.collapse('show');
        // 内层活动展开完成后执行滚动
        $eventCollapse.one('shown.bs.collapse', () => {
          $('html, body').animate({
            scrollTop: $eventCollapse.offset().top - 180
          }, 500);
        });
      });
      // 触发外层日期折叠项展开
      $dayCollapse.collapse('show');
    }
  }
});