求助：动态创建的Bootstrap折叠面板点击时无法自动关闭其他面板

看起来你遇到的问题是动态生成的Bootstrap折叠面板没法实现“点一个展开，其他自动关闭”的互斥效果对吧？这个问题的核心原因是没有正确配置折叠面板的data-parent属性——Bootstrap需要通过这个属性识别哪些折叠面板属于同一组，才能控制它们的互斥展开行为。

下面是具体的解决方案和代码示例：

问题原因 #

Bootstrap的折叠组件默认不会自动互斥展开，必须通过data-parent属性指定一个共同的父容器，告诉Bootstrap：“这些折叠面板是一组的，只能同时展开一个”。如果动态创建时没给每个折叠面板的触发元素设置这个属性，或者父容器的选择器不对，就会出现多个面板同时展开的情况。

解决方案步骤 #

1. 添加固定父容器：在模态框里准备一个带唯一ID的容器，用来包裹所有动态生成的折叠面板。
2. 绑定data-parent属性：每个折叠面板的触发按钮（或标题）必须设置data-parent，指向这个父容器的ID。
3. 保证ID唯一：每个折叠内容的ID和触发元素的data-target要一一对应，且不能重复（可以用索引区分）。

代码示例 #

模态框基础HTML结构 #

<div class="modal-body col-ms-12 col-sm-12 col-xs-12">
  <div class="col-ms-12 col-sm-12 col-xs-12">
    <h4 class="col-ms-3 col-sm-3 col-xs-3 nopadding">Number of workLoad</h4>
    <input type="text" id="myText" placeholder="Enter number of panels">
    <button id="generatePanels" class="btn btn-primary ml-2">Generate</button>
  </div>
  <!-- 折叠面板的父容器，必须有唯一ID -->
  <div id="accordionGroup" class="mt-3 col-ms-12 col-sm-12 col-xs-12"></div>
</div>

动态生成折叠面板的JavaScript代码 #

document.getElementById('generatePanels').addEventListener('click', function() {
  const panelCount = parseInt(document.getElementById('myText').value);
  const accordionContainer = document.getElementById('accordionGroup');
  
  // 清空之前的面板，避免重复生成
  accordionContainer.innerHTML = '';
  
  if (isNaN(panelCount) || panelCount <= 0) {
    alert('Please enter a valid positive number');
    return;
  }
  
  // 循环生成指定数量的折叠面板
  for (let i = 1; i <= panelCount; i++) {
    const panelHtml = `
      <div class="card mb-2">
        <div class="card-header" id="panelHeading${i}">
          <h5 class="mb-0">
            <button class="btn btn-link text-left" 
                    data-toggle="collapse" 
                    data-target="#panelCollapse${i}" 
                    data-parent="#accordionGroup">
              Workload Panel ${i}
            </button>
          </h5>
        </div>
        <div id="panelCollapse${i}" class="collapse" aria-labelledby="panelHeading${i}">
          <div class="card-body">
            This is the content for Workload Panel ${i}
          </div>
        </div>
      </div>
    `;
    accordionContainer.insertAdjacentHTML('beforeend', panelHtml);
  }
});

针对Bootstrap 5的调整 #

如果你用的是Bootstrap 5，注意属性名有更新：

• data-toggle → data-bs-toggle
• data-target → data-bs-target
• data-parent → data-bs-parent

调整后的触发按钮代码片段：

<button class="btn btn-link text-left" 
        data-bs-toggle="collapse" 
        data-bs-target="#panelCollapse${i}" 
        data-bs-parent="#accordionGroup">
  Workload Panel ${i}
</button>

关键注意事项 #

• 父容器的ID必须唯一，且所有触发元素的data-parent（或data-bs-parent）要准确指向这个ID。
• 每个折叠内容的ID不能重复，否则会导致折叠功能混乱。
• 确保你引入了正确的Bootstrap CSS和JS文件（Bootstrap 4及以下版本还需要引入jQuery）。

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