为什么照搬的Bootstrap 5 collapse组件官方示例点击后无响应？

问题原因 #

你使用的是Bootstrap 5版本的CSS和JS依赖，但折叠组件的触发属性仍沿用Bootstrap 4的旧写法，两者不兼容导致点击无响应。

修正方案 #

将触发元素上的两个属性做如下替换：

• 把data-toggle="collapse"替换为data-bs-toggle="collapse"
• 把data-target="#collapseExample"替换为data-bs-target="#collapseExample"

修正后的关键代码段 #

<p>
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      Link with href
    </a>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

其他校验项 #

• 确认引入的CDN资源无加载报错，当前代码中的Popper和Bootstrap JS地址、引入顺序均符合要求
• 不要重复引入多个版本的Bootstrap JS，避免冲突

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