点击按钮动态向Card Div中添加Bootstrap可折叠Div求助

我看了你的需求和代码片段，发现问题主要出在两个地方：一是事件绑定的对象不对（你绑定到了input[name="queue"]，但实际应该是点击「Add Exercise」按钮），二是动态生成的折叠面板没有设置唯一ID，导致Bootstrap无法正确识别每个面板的折叠关联。

下面是修正后的完整解决方案，直接替换你的代码就能用：

步骤1：确保HTML结构正确 #

首先，给你的card容器加一个唯一的ID，方便JS定位：

<!-- 你的card容器，给它加个id -->
<div class="card" id="exerciseCard">
  <!-- 初始的内容（如果有的话） -->
</div>

<!-- Add Exercise按钮，建议也加个id方便绑定事件 -->
<button id="addExerciseBtn" class="btn btn-success">Add Exercise</button>

步骤2：修正JavaScript代码 #

这段代码会每次点击按钮时生成一个带唯一ID的Bootstrap可折叠面板，并添加到你的card里：

// 用计数器生成唯一ID，避免重复
let exerciseNum = 0;

// 绑定按钮的点击事件
$('#addExerciseBtn').click(function() {
  exerciseNum++;
  // 生成当前面板的唯一标识
  const panelId = `exercise-group-${exerciseNum}`;
  const collapseId = `exercise-collapse-${exerciseNum}`;
  
  // 构建符合Bootstrap规范的折叠面板HTML
  const newPanel = `
    <div class="panel-group mt-3" id="${panelId}">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#${panelId}" href="#${collapseId}">
              练习 ${exerciseNum}
            </a>
          </h4>
        </div>
        <div id="${collapseId}" class="panel-collapse collapse">
          <div class="panel-body">
            <!-- 这里可以放你需要的表单或内容 -->
            <div class="form-group">
              <label>练习名称</label>
              <input type="text" class="form-control" placeholder="输入练习名称">
            </div>
          </div>
        </div>
      </div>
    </div>
  `;
  
  // 将新面板添加到card容器中
  $('#exerciseCard').append(newPanel);
  
  // 如果是Bootstrap 3版本，动态添加后需要手动初始化折叠（Bootstrap 4+无需这一步）
  // $(`#${collapseId}`).collapse();
});

关键注意点 #

• 唯一ID必须有：每个折叠面板的id和对应的href/data-target不能重复，否则点击时会同时触发多个面板的折叠/展开，所以用计数器生成唯一后缀是必须的。
• 事件绑定要准确：一定要绑定到「Add Exercise」按钮，而不是其他元素，否则点击不会触发添加操作。
• Bootstrap结构要规范：确保panel-group、panel、panel-collapse这些类名和data-toggle="collapse"等属性都正确，这是折叠功能正常工作的基础。

这样修改后，每次点击按钮就能在你的card里新增一个独立的可折叠面板啦～

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