异常教程

Bootstrap 折叠（Collapse）插件（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发中，如何优雅地展示和隐藏内容始终是一个核心需求。无论是移动端的菜单导航，还是复杂的表单组件，开发者都需要一种灵活且可扩展的解决方案。Bootstrap 的 Collapse 插件 正是为此而生。它通过简洁的 HTML 结构、直观的 JavaScript 方法和丰富的自定义选项，帮助开发者快速实现折叠面板、侧边栏菜单等交互效果。本文将从基础到高级技巧，系统性地解析 Bootstrap 折叠（Collapse）插件 的使用方法，并结合实战案例，帮助读者掌握这一工具的核心能力。

一、折叠插件的核心概念与基础用法

1.1 什么是折叠插件？

Collapse 插件 是 Bootstrap 框架中用于控制元素显示与隐藏的核心工具之一。它通过 CSS 过渡动画和 JavaScript 逻辑，实现了内容的平滑切换效果。想象一下，它就像一个“智能抽屉”：用户点击按钮时，抽屉会缓缓打开或关闭，而开发者只需提供简单的 HTML 结构，即可完成复杂的交互逻辑。

1.2 基础 HTML 结构

使用折叠插件的第一步是定义 HTML 结构。最简单的形式如下：

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">  
  点击展开内容  
</button>  

<div class="collapse" id="collapseExample">  
  <div class="card card-body">  
    这里是折叠的内容。  
  </div>  
</div>

关键点解析：

  • data-bs-toggle="collapse"：告诉 Bootstrap 这个按钮是一个折叠触发器。
  • data-bs-target="#collapseExample"：指定要控制的目标元素 ID。
  • collapse 类：为容器元素添加折叠功能。

1.3 动态控制折叠状态

除了通过 HTML 数据属性触发折叠，还可以直接调用 JavaScript 方法：

// 获取折叠元素  
const collapseElement = document.getElementById('collapseExample');  
const collapse = new bootstrap.Collapse(collapseElement);  

// 展开折叠内容  
collapse.show();  

// 关闭折叠内容  
collapse.hide();  

// 切换折叠状态  
collapse.toggle();

比喻：这就像遥控器的开关按钮，show() 是“打开”，hide() 是“关闭”，而 toggle() 则是“切换”——按下一次开，再按一次关。

二、进阶用法：实现复杂交互场景

2.1 多折叠面板联动

在 FAQ 页面或文档导航中，常需要实现“单选”或“多选”折叠面板。例如，实现类似书籍章节的“展开一个，关闭其他”效果：

<div class="accordion" id="accordionExample">  
  <div class="accordion-item">  
    <h2 class="accordion-header">  
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">  
        章节 1  
      </button>  
    </h2>  
    <div id="collapseOne" class="accordion-collapse collapse show">  
      <div class="accordion-body">章节 1 的内容...</div>  
    </div>  
  </div>  

  <div class="accordion-item">  
    <h2 class="accordion-header">  
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">  
        章节 2  
      </button>  
    </h2>  
    <div id="collapseTwo" class="accordion-collapse collapse">  
      <div class="accordion-body">章节 2 的内容...</div>  
    </div>  
  </div>  
</div>

关键点：

  • accordion 类：启用折叠面板的“单选”模式。
  • collapsed 类：初始状态为折叠。
  • show 类：指定默认展开的面板。

2.2 通过事件触发折叠

除了点击按钮，还可以通过其他事件（如页面滚动、表单提交）动态控制折叠：

// 当页面滚动到某个位置时展开折叠内容  
window.addEventListener('scroll', function() {  
  if (window.scrollY > 500) {  
    bootstrap.Collapse.getOrCreateInstance('#collapseExample').show();  
  }  
});

三、事件监听与状态管理

3.1 监听折叠事件

Collapse 插件提供了多个事件钩子，允许开发者在特定时刻执行自定义逻辑：

const collapse = bootstrap.Collapse.getOrCreateInstance('#collapseExample');  

collapse.addEventListener('show.bs.collapse', function () {  
  console.log('折叠内容即将展开');  
});  

collapse.addEventListener('hidden.bs.collapse', function () {  
  console.log('折叠内容已关闭');  
});

常见事件：
| 事件名称 | 触发时机 |
|------------------------|------------------------------|
| show.bs.collapse | 展开动画开始前 |
| shown.bs.collapse | 展开动画完成后 |
| hide.bs.collapse | 关闭动画开始前 |
| hidden.bs.collapse | 关闭动画完成后 |

3.2 状态查询与强制更新

通过实例方法，可以获取当前折叠状态或强制同步 UI：

if (collapse.isShown) {  
  console.log('当前内容已展开');  
}  

// 强制更新折叠状态（如动态修改内容后）  
collapse._isShown = false;  
collapse.update();

四、高级技巧与性能优化

4.1 自定义过渡动画

默认的折叠动画可能无法满足设计需求。通过覆盖 CSS 变量，可以轻松调整动画时长和缓动效果：

/* 修改折叠过渡时长为 0.5 秒 */  
.collapse {  
  transition-duration: 0.5s;  
}  

/* 添加自定义缓动曲线 */  
.collapse.collapsing {  
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);  
}

4.2 响应式折叠控制

结合 Bootstrap 的响应式断点类，可以实现不同屏幕尺寸下的折叠逻辑：

<!-- 在小屏幕设备上默认折叠，大屏幕展开 -->  
<div class="collapse d-none d-md-block" id="responsiveCollapse">  
  <!-- 内容 -->  
</div>

4.3 性能优化建议

  • 懒加载内容：对大型数据集，可使用 fetch() 在折叠展开时动态加载内容。
  • 避免嵌套过深：折叠面板的嵌套层级建议不超过 2 层，否则可能影响交互体验。

五、常见问题与解决方案

5.1 为什么折叠内容无法展开？

可能原因：

  • 目标元素 ID 与 data-bs-target 不匹配。
  • 未引入 Bootstrap 的 CSS/JavaScript 文件。

解决方法：

  1. 检查 HTML 结构的 ID 和类名是否正确。
  2. 确保在页面中加载了 bootstrap.bundle.min.js。

5.2 如何实现“展开所有”按钮？

通过 JavaScript 遍历所有折叠实例：

document.getElementById('expandAll').addEventListener('click', () => {  
  document.querySelectorAll('.collapse').forEach(element => {  
    bootstrap.Collapse.getOrCreateInstance(element).show();  
  });  
});

5.3 折叠动画卡顿如何优化？

  • 减少 CSS 过渡的复杂度（如避免同时修改多个属性）。
  • 对于大量元素，考虑使用虚拟滚动技术。

结论

Bootstrap 折叠（Collapse）插件 是一个功能强大且易于上手的工具，它通过标准化的 HTML 结构和灵活的 API，帮助开发者快速实现复杂的内容交互。从基础的按钮触发，到高级的动态事件监听和响应式控制，本文的案例和代码示例展示了如何在实际项目中灵活运用这一插件。

掌握折叠插件不仅是提升 Web 应用用户体验的关键，更是理解 Bootstrap 框架设计哲学的重要入口。无论是构建文档导航、表单组件，还是动态菜单，开发者都可以通过组合 Bootstrap 的 Collapse 插件与其他组件（如 Accordion、Navs），创造出既美观又实用的交互效果。

如需进一步学习，建议查阅官方文档或参与社区讨论，探索更多进阶技巧和最佳实践。

最新发布

查看更多文章