Bootstrap Collapse手风琴点击后无法自动折叠其余项问题求助

安全阿岳

2026-9-28

问题原因

手风琴互斥折叠依赖data-bs-parent属性指向父手风琴容器的ID，你代码中渲染折叠项时填写的#accordionExample不存在，实际承载所有手风琴项的容器ID为display，属性值不匹配导致互斥规则失效。
自定义JS引入顺序早于Bootstrap JS，可能导致动态生成的DOM无法正确绑定Bootstrap折叠事件。
代码存在两处小语法问题：HTML多了多余的闭合</div>标签，新闻卡片中跳转链接的<a>标签未正确闭合。

修复方案

1. 调整JS渲染逻辑

修改JS中折叠项的data-bs-parent属性值，同时修复a标签语法错误：

// 仅需修改str模板内的折叠容器部分代码，其余逻辑保持不变
let str = `<div class="accordion-item">
<h2 class="accordion-header" id="heading${index}">
  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${index}" aria-expanded="false" aria-controls="collapse${index}">
    ${element.title}
  </button>
</h2>

<div id="collapse${index}" class="accordion-collapse collapse" aria-labelledby="heading${index}" data-bs-parent="#display">
  <div class="accordion-body">
    <strong>  ${element.description}</strong>
    <a href="${element.url}" target="_blank"> <button type="button" class="btn btn-primary">Learn more</button> </a>
  </div>
</div>

</div>`

2. 调整JS引入顺序

将Bootstrap JS的引入位置放到自定义JS之前，保证Bootstrap初始化完成后再执行动态渲染逻辑：

<!-- 先引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>
<!-- 再引入自定义业务JS -->
<script src="./JS/index.js"></script>