折叠卡片展开后立即自动闭合问题求助

嘿，我碰到过一模一样的问题！点击Card 2按钮后它刚展开就秒关，这事儿大概率是Bootstrap的JS依赖没配对或者引入顺序错了导致的，咱们来一步步搞定它：

核心问题排查&解决步骤 #

1. 先把依赖文件的事儿捋顺 #

Bootstrap的折叠（Collapse）组件不是孤立运行的，得依赖其他库：

• 如果你用的是Bootstrap 4：必须按「jQuery → Popper.js → Bootstrap JS」的顺序引入本地库文件，顺序错一步都不行
• 如果你用的是Bootstrap 5：不用管jQuery了，直接引入Bootstrap的JS文件就行，它自己带了Popper的精简版

要是漏了某个依赖，或者顺序搞反了，折叠组件的状态切换逻辑就会失效，出现展开又马上回弹的诡异情况。

2. 检查代码里的小细节 #

你的示例代码逻辑本身没问题，但可以再确认两个点：

• 页面里只能有一个id为accordion的元素，不然data-parent会搞混关联的面板
• 按钮的data-target属性值，必须和对应折叠面板的id完全匹配（你的代码里#collapse2对应id="collapse2"，这部分是对的）

可以直接用的修正版代码 #

这里给你一个完整的可运行示例，把依赖路径换成你本地的文件就行：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入本地Bootstrap CSS -->
  <link rel="stylesheet" href="你的本地路径/bootstrap.min.css">
  <title>Accordion Test</title>
</head>
<body>
  <div id="accordion">
    <div class="card">
      <div class="card-header" id="header1">
        <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
            Card 1 Button
          </button>
        </h5>
      </div>
      <div id="collapse1" class="collapse show" aria-labelledby="header1" data-parent="#accordion">
        <div class="card-body">
          Card 1 Content
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="header2">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
            Card 2 Button
          </button>
        </h5>
      </div>
      <div id="collapse2" class="collapse" aria-labelledby="header2" data-parent="#accordion">
        <div class="card-body">
          Card 2 Content
        </div>
      </div>
    </div>
  </div>

  <!-- 引入本地依赖JS，顺序不能乱（Bootstrap 4版本示例） -->
  <script src="你的本地路径/jquery.slim.min.js"></script>
  <script src="你的本地路径/popper.min.js"></script>
  <script src="你的本地路径/bootstrap.min.js"></script>
</body>
</html>

为啥会出现这种情况？ #

当Bootstrap的JS没正确加载时，浏览器认不出data-toggle="collapse"这些属性，点击按钮时，折叠组件的状态切换逻辑跑不起来，就会出现展开后立刻还原成初始状态的问题。另外如果页面里混了多个版本的jQuery或Bootstrap JS，也会触发组件冲突，导致同样的bug。

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