Bootstrap折叠效果失效问题求助：按钮无法显示隐藏内容

你的代码结构没问题，折叠功能失效一般是版本不兼容或依赖文件没引对，按下面几点排查：

• 检查Bootstrap版本对应的属性
  如果你用的是Bootstrap 5，按钮上的属性要改成data-bs-toggle="collapse"和data-bs-target="#ho2"——BS5把所有旧的data-*前缀换成了data-bs-*，用旧属性会导致功能不触发。修改后按钮代码如下：

  <button class="bc2 border-primary bg-primary rounded-2 mt-4 p-1 text-nowrap card-footer text-white" type="button" data-bs-toggle="collapse" data-bs-target="#ho2" aria-expanded="false" aria-controls="ho2">Get Started</button>
  

  要是用的Bootstrap 4，那你的data属性是对的，直接往下看依赖问题。

• 确认依赖文件正确引入

  • Bootstrap 4需要先引入jQuery，再引入Popper.js，最后引入Bootstrap的JS文件，顺序不能乱：

    <!-- jQuery -->
    <script src="jquery.min.js"></script>
    <!-- Popper.js -->
    <script src="popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="bootstrap.min.js"></script>
    

  • Bootstrap 5不需要jQuery，直接引入包含Popper的Bootstrap bundle文件就行：

    <script src="bootstrap.bundle.min.js"></script>
    

  注意：必须确保CSS和JS文件的版本一致，别混着用BS4的CSS和BS5的JS。

• 确保页面中ID唯一
  检查页面里有没有其他元素也用了id="ho2"，重复ID会导致折叠功能找不到正确的目标元素。

• 手动初始化折叠（可选）
  如果上面的都没问题还是不生效，试试用JS手动初始化折叠组件：

  • Bootstrap 5：

    document.addEventListener('DOMContentLoaded', function() {
      new bootstrap.Collapse(document.getElementById('ho2'));
    });
    

  • Bootstrap 4：

    $(document).ready(function() {
      $('#ho2').collapse();
    });
    

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