如何让link_to文本可点击触发Bootstrap collapsible折叠组件？

算力阿峰

2026-9-27

实现方案

方案1：Bootstrap原生属性实现（无需额外JS）

直接将头部文本和caret图标统一放在同一个带Bootstrap collapse触发属性的容器中，避免使用带href的a标签即可解决锚点跳转问题：

<!-- 整个头部区域作为可点击触发容器 -->
<div 
  class="d-flex align-items-center" 
  type="button" 
  data-toggle="collapse" 
  data-target="#weekly" 
  aria-expanded="false" 
  aria-controls="weekly"
  style="cursor: pointer;"
>
  <span><strong>"Weekly"</strong></span>
  <span class="caret"></span>
</div>

<div class="collapse overflow-hidden" id="weekly">
  # 可折叠内容
</div>

说明：这里用普通div作为触发容器，没有href属性，不会触发浏览器锚点跳转，整个区域点击都会触发折叠/展开动作，cursor: pointer样式用于提示用户该区域可点击。

方案2：保留原有DOM结构，添加少量JS兼容

如果不想改动原有DOM结构，可以给文本标签绑定点击事件手动触发折叠动作：

<!-- 给文本span加触发标识和目标指向 -->
<span 
  class="collapse-trigger" 
  data-target="#weekly" 
  style="cursor: pointer;"
><strong>"Weekly"</strong></span> 
<a class="caret" type="button" data-toggle="collapse" data-target="#weekly" aria-expanded="false" aria-controls="weekly"></a>

<div class="collapse overflow-hidden" id="weekly">
  # 可折叠内容
</div>

添加对应的JS逻辑：

// Bootstrap 5 版本写法
document.querySelectorAll('.collapse-trigger').forEach(trigger => {
  trigger.addEventListener('click', () => {
    const targetEl = document.querySelector(trigger.dataset.target);
    new bootstrap.Collapse(targetEl).toggle();
  })
})

// 如果使用Bootstrap 3/4 + jQuery，写法如下：
// $('.collapse-trigger').on('click', function() {
//   $($(this).data('target')).collapse('toggle');
// })