Accordion按钮无法正常折叠/展开问题求助

你的Accordion静态结构没问题，但点击按钮无法展开/折叠，核心原因是未引入Bootstrap的JavaScript文件——Accordion的展开/折叠交互完全依赖Bootstrap JS处理data-bs-toggle和data-bs-target等属性的事件绑定。

解决步骤： #

1. 确保Bootstrap资源正确引入：

   • 先引入Bootstrap CSS，再引入Bootstrap JS（推荐用bootstrap.bundle.min.js，它包含Popper.js，是Accordion等交互组件的必需依赖）。
   • 保证CSS和JS版本一致，避免版本冲突导致异常。

2. 不要手动修改状态类：
   手动添加/移除show类或修改aria-expanded属性会破坏组件内部状态同步，这些属性应由Bootstrap JS自动管理。

可运行的完整代码示例： #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="bootstrap.min.css">
  <title>Accordion Demo</title>
</head>
<body>
  <div class="container mt-3">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="accordion" id="season-1">
          <div class="accordion-item">
            <h2 class="accordion-header" id="episode-1">
              <button
                  class="accordion-button"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#episode-1-body"
                  aria-expanded="true"
                  aria-controls="episode-1-body">Episode 1</button>
            </h2>
            <div id="episode-1-body"
                class="accordion-collapse collapse show"
                aria-labelledby="episode-1"
                data-bs-parent="#season-1">
              <div class="accordion-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque aut placeat dolor quos beatae tempore. Illo sapiente non, sed saepe ipsum laudantium, at natus consectetur, doloribus ullam laboriosam perspiciatis magni.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

额外排查点： #

• 若引入资源后仍失效，检查页面是否有其他JS代码阻止了按钮默认事件，或覆盖了Bootstrap的事件绑定。
• 确认本地Bootstrap文件路径正确，或使用CDN链接确保资源可正常访问。

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