如何用jQuery复用HTML公共代码块到Bootstrap Accordion中

核心思路 #

1. 公共元素初始隐藏，通过jQuery监听Bootstrap Accordion的展开/收起事件，动态将公共元素克隆插入到目标面板中，避免重复编写代码。
2. 克隆而非移动公共元素，保证所有面板都能独立调用；添加统一类标记，方便后续清理。

步骤1：HTML结构调整 #

将公共元素放在页面任意位置（比如body末尾），设置初始隐藏；Accordion面板保留空的主体区域用于动态插入内容：

<!-- 公共元素：初始隐藏 -->
<div id="common-list" style="display:none;">
  <ul>
    <li>公共列表项1</li>
    <li>公共列表项2</li>
  </ul>
</div>

<div id="common-form" style="display:none;">
  <form>
    <div class="mb-3">
      <label class="form-label">输入框</label>
      <input type="text" class="form-control">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>

<!-- Bootstrap Accordion -->
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        面板1 - 显示公共列表
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body"></div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        面板2 - 显示公共表单
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body"></div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        面板3 - 同时显示列表和表单
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body"></div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingFour">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
        面板4 - 自定义内容+公共列表
      </button>
    </h2>
    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p>这是面板4的自定义内容</p>
      </div>
    </div>
  </div>
</div>

步骤2：jQuery逻辑实现 #

监听Accordion的展开/收起事件，动态克隆插入公共元素，并在合适时机清理：

$(document).ready(function() {
  // 面板展开完成后插入公共元素
  $('#accordionExample').on('shown.bs.collapse', function(e) {
    const targetPanel = $(e.target);
    const panelBody = targetPanel.find('.accordion-body');
    
    // 先清理面板中已有的公共元素，避免重复添加
    panelBody.find('.common-element').remove();
    
    // 根据面板ID匹配要插入的公共元素
    switch(targetPanel.attr('id')) {
      case 'collapseOne':
        $('#common-list').clone().removeAttr('id').addClass('common-element').show().appendTo(panelBody);
        break;
      case 'collapseTwo':
        $('#common-form').clone().removeAttr('id').addClass('common-element').show().appendTo(panelBody);
        break;
      case 'collapseThree':
        $('#common-list').clone().removeAttr('id').addClass('common-element').show().appendTo(panelBody);
        $('#common-form').clone().removeAttr('id').addClass('common-element').show().appendTo(panelBody);
        break;
      case 'collapseFour':
        $('#common-list').clone().removeAttr('id').addClass('common-element').show().appendTo(panelBody);
        break;
    }
  });

  // 面板收起时清理公共元素，减少DOM节点
  $('#accordionExample').on('hidden.bs.collapse', function(e) {
    $(e.target).find('.common-element').remove();
  });
});

关键细节说明 #

• 克隆元素：使用clone()复制公共元素，而非直接移动，确保原元素始终存在，供所有面板调用；克隆后移除原ID，避免DOM中出现重复ID冲突。
• 事件选择：用shown.bs.collapse而非show.bs.collapse，确保面板完全展开后再插入内容，避免布局错位。
• 清理机制：通过common-element类标记动态插入的元素，在面板展开前和收起时清理，防止重复累积DOM节点。

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