基于Bootstrap的手风琴内嵌类文本Modal弹窗开发需求问询

API 探路者

2026-7-16

需求与现有代码

我需要使用Bootstrap开发手风琴（accordion）组件，需满足以下要求：

在手风琴展开区域内添加可触发Modal弹窗的按钮，按钮样式为文本样式
左侧添加代表表单的图标，完全复刻给定设计效果
弹窗触发项为类似手风琴标题但尺寸更小的模块

当前完成的代码

<div class="accordion" id="accordionExample">
<div class="accordion-item">
  <h2 class="accordion-header" id="headingOne">
      <div>
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<tr class="hover:bg-gray-50 cursor-pointer">
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
    <div class="text-sm font-medium text-brand">Centre Onboarding</div>
  </td>
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-500 border border-gray-500 mr-2">Not Started</span>
  </td>
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
    <span class="mr-2">0%</span>
  </td>
</tr>
</button>
</div>
  </h2>
  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
    <div class="accordion-body">
      Content for Accordion 1
    </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">
      Accordion 2
    </button>
  </h2>
  <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
    <div class="accordion-body">
      Content for Accordion 2
    </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">
      Accordion 3
    </button>
  </h2>
  <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
    <div class="accordion-body">
      Content for Accordion 3
    </div>
  </div>
</div>
</div>

已引入的Bootstrap资源

<!-- BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- BOOTSTRAP TOGGLE -->
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

解决方案

先修正原代码中tr直接嵌套在button内的非法HTML结构，改用Flex布局实现手风琴标题的多列展示；再引入Bootstrap Icons添加表单图标，在展开区域内创建小尺寸触发模块，并实现文本按钮触发Modal的功能。

完整代码

<!-- 新增Bootstrap Icons资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<!-- BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- BOOTSTRAP TOGGLE -->
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

<div class="accordion" id="accordionExample">
  <!-- 手风琴项1 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button d-flex align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <!-- 左侧表单图标 -->
        <i class="bi bi-file-earmark-text me-3 text-primary"></i>
        <!-- 标题内容用Flex布局模拟多列 -->
        <div class="d-flex w-100 justify-content-between align-items-center">
          <div class="text-sm font-medium text-primary">Centre Onboarding</div>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-500 border border-gray-500">Not Started</span>
          <span class="text-sm text-gray-500">0%</span>
        </div>
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <!-- 小尺寸触发模块 -->
        <div class="d-flex align-items-center p-3 border rounded mb-2 hover:bg-light cursor-pointer">
          <i class="bi bi-file-earmark-text me-3 text-secondary"></i>
          <div class="d-flex w-100 justify-content-between align-items-center">
            <span class="text-sm text-dark">机构信息登记</span>
            <!-- 文本样式按钮触发Modal -->
            <button type="button" class="btn btn-link p-0 text-primary" data-bs-toggle="modal" data-bs-target="#formModal">
              填写表单
            </button>
          </div>
        </div>
        <div class="d-flex align-items-center p-3 border rounded hover:bg-light cursor-pointer">
          <i class="bi bi-file-earmark-text me-3 text-secondary"></i>
          <div class="d-flex w-100 justify-content-between align-items-center">
            <span class="text-sm text-dark">联系人信息录入</span>
            <button type="button" class="btn btn-link p-0 text-primary" data-bs-toggle="modal" data-bs-target="#formModal">
              填写表单
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 手风琴项2 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed d-flex align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <i class="bi bi-file-earmark-text me-3 text-primary"></i>
        <div class="d-flex w-100 justify-content-between align-items-center">
          <div class="text-sm font-medium text-primary">Accordion 2</div>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-500 border border-gray-500">In Progress</span>
          <span class="text-sm text-gray-500">50%</span>
        </div>
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <div class="d-flex align-items-center p-3 border rounded mb-2 hover:bg-light cursor-pointer">
          <i class="bi bi-file-earmark-text me-3 text-secondary"></i>
          <div class="d-flex w-100 justify-content-between align-items-center">
            <span class="text-sm text-dark">项目基础信息</span>
            <button type="button" class="btn btn-link p-0 text-primary" data-bs-toggle="modal" data-bs-target="#formModal">
              填写表单
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 手风琴项3 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed d-flex align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        <i class="bi bi-file-earmark-text me-3 text-primary"></i>
        <div class="d-flex w-100 justify-content-between align-items-center">
          <div class="text-sm font-medium text-primary">Accordion 3</div>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-500 border border-gray-500">Completed</span>
          <span class="text-sm text-gray-500">100%</span>
        </div>
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <div class="d-flex align-items-center p-3 border rounded hover:bg-light cursor-pointer">
          <i class="bi bi-file-earmark-text me-3 text-secondary"></i>
          <div class="d-flex w-100 justify-content-between align-items-center">
            <span class="text-sm text-dark">收尾确认表单</span>
            <button type="button" class="btn btn-link p-0 text-primary" data-bs-toggle="modal" data-bs-target="#formModal">
              查看表单
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal弹窗 -->
<div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="formModalLabel">表单填写</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 这里添加表单内容 -->
        <p>表单内容区域</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div>
  </div>
</div>

关键修改说明

修复HTML结构：将原代码中非法嵌套的tr元素替换为Bootstrap Flex布局，保证语义正确性和样式兼容性
添加表单图标：引入Bootstrap Icons，在每个手风琴标题和展开区域的触发模块左侧添加bi-file-earmark-text图标
实现小尺寸触发模块：在展开区域内创建带边框、圆角的模块，布局模仿手风琴标题但缩小字号和内边距
文本样式按钮：使用btn btn-link p-0类实现无背景、无边框的文本按钮，绑定Modal触发的data-bs-toggle和data-bs-target属性
Modal弹窗：添加标准Bootstrap Modal结构，可根据需求填充表单内容

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

基于Bootstrap的手风琴内嵌类文本Modal弹窗开发需求问询

当前完成的代码 #

已引入的Bootstrap资源 #

完整代码 #

关键修改说明 #

当前完成的代码

已引入的Bootstrap资源

完整代码

关键修改说明