Bootstrap 折叠（Collapse）插件
Bootstrap 5 的 Collapse（折叠） 插件用于切换内容的显示或隐藏，通常用于创建可展开/收起的面板、菜单或手风琴效果。它依赖 Transition 插件实现平滑的动画效果（如高度变化或淡入淡出），通过 JavaScript 动态管理内容的可见性。
以下是对 Bootstrap 5 Collapse 插件的详细概览，包括功能、用法和示例代码。
1. 功能与用途
- 功能：
- 切换内容的显示/隐藏状态，通常通过改变高度或透明度。
- 支持平滑过渡动画（基于 Transition 插件）。
- 支持单个折叠面板或多面板手风琴（accordion）模式。
- 提供键盘导航和可访问性支持。
- 用途：
- 创建可展开的 FAQ 列表。
- 实现导航菜单的折叠/展开（如移动端菜单）。
- 构建手风琴效果（一次仅展开一个面板）。
- 显示/隐藏详细信息或表单字段。
- 关键类：
.collapse,.collapsing,.show,.accordion,.accordion-item.
2. 工作原理
- 结构：
.collapse：定义折叠内容区域，初始隐藏。.collapsing：过渡期间的临时类，控制动画过程。.show：表示内容可见状态。.accordion：用于手风琴效果，确保一次只展开一个面板。- 触发：通过
data-bs-toggle="collapse"和data-bs-target属性，或 JavaScript 触发折叠/展开。 - 过渡效果：使用 CSS
transition属性（通常是height或opacity）实现平滑动画。 - 手风琴模式：通过
.accordion和data-bs-parent属性实现多个折叠面板的互斥展开。
3. 常用属性与选项
- HTML 属性（通过
data-bs-*配置）： data-bs-toggle="collapse": 启用折叠功能。data-bs-target="#collapseId": 指定目标折叠内容的 ID（或通过href="#collapseId"）。data-bs-parent="#parentId": 指定手风琴的父容器，确保其他面板关闭。- JavaScript 选项：
parent: 手风琴的父元素（选择器或 DOM 元素）。toggle: 是否立即切换状态（默认true）。- 事件：
show.bs.collapse: 折叠内容开始显示时触发。shown.bs.collapse: 折叠内容完全显示后触发。hide.bs.collapse: 折叠内容开始隐藏时触发。hidden.bs.collapse: 折叠内容完全隐藏后触发.
4. 使用方法
- 引入 Bootstrap 依赖：
确保包含 Bootstrap 的 CSS 和 JS 文件（bootstrap.bundle.min.js包含 Transition 插件）：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>- 创建折叠内容：
- 单个折叠面板：
html <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 切换折叠 </button> ¨K12K - 手风琴效果：
html ¨K13K
- 通过 JavaScript 控制：
动态显示或隐藏折叠内容：
const collapse = new bootstrap.Collapse(document.querySelector('#collapseExample'), {
toggle: false // 不立即切换
});
collapse.show(); // 显示折叠内容
collapse.hide(); // 隐藏折叠内容5. 示例代码：折叠和手风琴示例
以下是一个完整的网页示例，展示如何使用 Bootstrap 的 Collapse 插件，包括单个折叠面板和手风琴效果。
Bootstrap 折叠示例
Bootstrap 折叠示例
单个折叠
切换折叠内容
这是一个可折叠的内容，点击按钮可以展开或收起，具有平滑的过渡动画。
手风琴效果
面板 1
这是面板 1 的内容。Lorem ipsum dolor sit amet, consectetur adipiscing elit.
面板 2
这是面板 2 的内容。Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
面板 3
这是面板 3 的内容。Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
// 监听折叠事件
const collapseElement = document.querySelector('#collapseExample');
collapseElement.addEventListener('shown.bs.collapse', () => {
console.log('折叠内容已展开');
});
collapseElement.addEventListener('hidden.bs.collapse', () => {
console.log('折叠内容已隐藏');
});
// 动态控制手风琴
const accordionButtons = document.querySelectorAll('.accordion-button');
accordionButtons.forEach(button => {
button.addEventListener('click', () => {
console.log(`点击了面板: ${button.textContent}`);
});
});
</script>6. 关键点
- 折叠与手风琴：
- 单个折叠面板使用
.collapse，无需data-bs-parent。 - 手风琴效果需使用
.accordion和data-bs-parent确保互斥展开。 - 可访问性：
- 使用
aria-expanded表示按钮的展开/收起状态。 - 使用
aria-controls关联触发按钮和目标内容。 - 确保内容区域可聚焦（通过
tabindex="0"）。 - 过渡效果：
- 默认通过
height实现折叠动画，可通过 CSS 自定义：css .collapse { transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out; opacity: 0; } .collapse.show { opacity: 1; } - 动态内容：
- 动态添加内容后，需重新初始化 Collapse：
javascript const newCollapse = document.createElement('div'); newCollapse.className = 'collapse'; newCollapse.id = 'newCollapse'; newCollapse.innerHTML = '<div class="card card-body">动态内容</div>'; document.querySelector('.container').appendChild(newCollapse); new bootstrap.Collapse(newCollapse);
7. 自定义折叠
- 样式：
- 自定义手风琴按钮或内容样式：
css .accordion-button { background-color: #f8f9fa; color: #333; } .accordion-button:not(.collapsed) { background-color: #007bff; color: white; } - 动画：
- 添加自定义动画（如滑动效果）：
css .collapse { transform: translateY(-10px); opacity: 0; } .collapse.show { transform: translateY(0); opacity: 1; } - 动态控制：
- 使用 JavaScript 动态切换多个折叠面板：
javascript document.querySelectorAll('.collapse').forEach(collapse => { const bsCollapse = new bootstrap.Collapse(collapse, { toggle: false }); bsCollapse.show(); });
8. 注意事项
- 依赖：Collapse 插件需要 Bootstrap 的 JavaScript 和 Transition 插件。
- 内容高度：确保折叠内容有明确的高度，否则动画可能失效。
- 手风琴行为：设置
data-bs-parent时，确保所有折叠面板都在同一父容器内。 - 性能：大量折叠面板可能影响性能，建议优化 DOM 结构。
- 移动端：确保触发按钮易于点击（至少 48×48 像素），内容适应小屏幕。
9. 更多信息
- 详细文档：请参考 Bootstrap 5 官方文档 – Collapse.
- 相关插件：Collapse 常与 Accordion、Navbar 或 Modals 结合使用，建议查看相关文档。
如果你需要更复杂的折叠示例（如动态内容加载、嵌套手风琴）或对某个功能的深入解释，请告诉我！
“`