Bootstrap4 折叠（超详细）

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

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

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

在现代网页开发中，Bootstrap4 折叠（Bootstrap4 Collapse）是一个极为实用的功能模块。它允许开发者通过简洁的代码实现内容的动态展开与折叠，有效优化页面布局，提升用户体验。无论是展示详细说明、隐藏次要信息，还是构建可交互的导航菜单，Bootstrap4 折叠都能提供直观且优雅的解决方案。本文将从基础用法、高级技巧到实际案例，逐步解析这一功能的核心原理与应用场景，帮助开发者快速掌握其精髓。

一、Bootstrap4 折叠的基础概念与核心原理

1.1 什么是 Bootstrap4 折叠？

Bootstrap4 折叠是 Bootstrap 框架提供的交互组件之一，其核心功能是控制 HTML 元素的显示与隐藏。通过简单的类名和数据属性（data-attributes），开发者可以轻松实现“点击按钮展开内容”“单次仅展开一个面板”等效果。其底层逻辑基于 CSS 的 display 属性和 JavaScript 的事件监听，但开发者无需手动编写复杂的逻辑代码，只需遵循 Bootstrap 的规范即可快速集成。

形象比喻：
可以将折叠功能理解为“抽屉式收纳”——用户点击按钮时，就像拉开抽屉露出内部内容；再次点击则关闭抽屉，内容重新隐藏。这种设计既节省了页面空间，又提供了按需查看的灵活性。

1.2 核心组件与类名解析

Bootstrap4 折叠的核心依赖于以下 HTML 结构和类名：

• 折叠触发器（Trigger）：通常是一个按钮或链接，通过 data-toggle="collapse" 属性绑定到目标元素。
• 折叠容器（Collapse Container）：使用 collapse 类包裹需要隐藏的内容，并通过 data-target 或 href 指定目标 ID。
• 状态类名：如 show（显示内容）、collapsing（过渡动画中）等，由 Bootstrap 自动管理。

示例代码：

<!-- 触发器 -->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#demoCollapse">
  点击展开内容
</button>

<!-- 折叠容器 -->
<div id="demoCollapse" class="collapse">
  这里是折叠后显示的内容。
</div>

1.3 基础用法：单个折叠面板

通过上述代码，可以实现最基本的折叠效果。点击按钮时，#demoCollapse 容器会切换显示状态。若初始需要显示内容，则可添加 show 类：

<div id="demoCollapse" class="collapse show">...</div>

二、Bootstrap4 折叠的进阶技巧

2.1 多折叠联动与互斥控制

在实际开发中，常需要实现“一次仅展开一个折叠面板”的效果（如常见于 FAQ 页面）。此时可通过 data-parent 属性关联父容器，让所有子折叠容器共享同一个父级，从而实现互斥：

示例代码：

<div id="accordionParent">
  <!-- 第一个折叠面板 -->
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          标题一
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordionParent">
      <div class="card-body">内容一</div>
    </div>
  </div>

  <!-- 第二个折叠面板 -->
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          标题二
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordionParent">
      <div class="card-body">内容二</div>
    </div>
  </div>
</div>

原理说明：
通过 data-parent 指定共同的父容器 #accordionParent，当某一个折叠面板展开时，其他同级面板会自动关闭，形成“单选”效果。

2.2 自定义折叠样式与动画

Bootstrap 默认的折叠动画是简单的 CSS transition，但开发者可通过覆盖样式实现个性化效果。例如，调整动画时长或添加阴影：

示例代码：

/* 覆盖折叠过渡动画 */
.collapse {
  transition: max-height 0.3s ease-out;
}

/* 展开时添加阴影 */
.collapse.show {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

技巧提示：

• 若需完全禁用动画，可移除 collapsing 类或设置 transition: none;。
• 动画效果需与 collapsing 状态结合，避免与默认逻辑冲突。

2.3 动态内容加载与事件监听

Bootstrap4 折叠不仅支持静态内容，还可结合 JavaScript 实现动态交互。例如，通过事件监听在折叠展开时加载数据：

示例代码：

<!-- 触发器 -->
<button class="btn btn-secondary" data-toggle="collapse" data-target="#dynamicContent">加载动态内容</button>

<!-- 空容器 -->
<div id="dynamicContent" class="collapse"></div>

<script>
  // 监听折叠展开事件
  $('#dynamicContent').on('show.bs.collapse', function () {
    // 模拟异步请求
    $(this).html('<p>正在加载...</p>');
    setTimeout(() => {
      $(this).html('<p>这是通过事件监听动态加载的内容。</p>');
    }, 1000);
  });
</script>

关键点：

• 使用 show.bs.collapse 和 hidden.bs.collapse 等事件名，可精准控制折叠过程中的行为。
• 需确保 jQuery 已正确引入，因 Bootstrap 的折叠功能依赖其事件机制。

三、常见问题与解决方案

3.1 折叠内容不显示或无法触发

可能原因：

• 未正确引入 Bootstrap 的 CSS/JS 文件。
• 类名拼写错误（如 collapse 缺少或 show 未正确添加）。
• 数据属性 data-target 的 ID 与目标元素不匹配。

解决方案：

1. 检查 HTML 头部是否包含以下引用：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.2/js/bootstrap.min.js"></script>

2. 确认触发器的 data-target 值与折叠容器的 id 完全一致。

3.2 多折叠面板同时展开

解决方法：
在折叠容器中添加 data-parent 属性，指定共同的父容器，如：

<div id="panelParent">
  <div class="card">
    <button class="btn" data-toggle="collapse" data-target="#panel1" data-parent="#panelParent">面板1</button>
    <div id="panel1" class="collapse">内容1</div>
  </div>
  <div class="card">
    <button class="btn" data-toggle="collapse" data-target="#panel2" data-parent="#panelParent">面板2</button>
    <div id="panel2" class="collapse">内容2</div>
  </div>
</div>

四、实战案例：构建可折叠的导航菜单

4.1 需求场景

设计一个侧边栏导航，包含主菜单项和子菜单项。点击主菜单时，子菜单折叠展开，提升移动端的导航效率。

实现代码：

<div class="sidebar">
  <ul class="nav flex-column">
    <!-- 主菜单项 -->
    <li class="nav-item">
      <a class="nav-link" data-toggle="collapse" href="#submenu1" role="button" aria-expanded="false">
        主菜单1
        <i class="fas fa-angle-down float-right"></i>
      </a>
      <!-- 子菜单 -->
      <div id="submenu1" class="collapse">
        <ul class="nav pl-4">
          <li class="nav-item">子项1</li>
          <li class="nav-item">子项2</li>
        </ul>
      </div>
    </li>
    <!-- 其他主菜单项类似... -->
  </ul>
</div>

4.2 样式优化与交互细节

• 图标动态旋转：通过监听折叠状态，动态切换箭头方向：

$('.nav-link').on('shown.bs.collapse', function() {
  $(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up');
});
$('.nav-link').on('hidden.bs.collapse', function() {
  $(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
});

• 移动端适配：为侧边栏添加响应式类，如 d-md-block d-none，使其仅在中大型屏幕显示。

五、与 Bootstrap4 其他组件的联动

5.1 折叠与 Modal 的结合

在模态框（Modal）中嵌入折叠内容，可实现复杂的信息分层展示。例如：

<!-- 模态框触发器 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框内容 -->
<div class="modal" id="myModal">
  <div class="modal-body">
    <!-- 模态框内的折叠区域 -->
    <button class="btn" data-toggle="collapse" data-target="#modalCollapse">显示详细信息</button>
    <div id="modalCollapse" class="collapse">
      这里是模态框中的折叠内容。
    </div>
  </div>
</div>

5.2 与 Accordion 的区别与互补

Bootstrap 的 Accordion 组件本质是折叠功能的封装，通过 data-parent 实现互斥。若需完全自定义折叠逻辑（如多级联动），则建议直接使用基础折叠 API。

六、性能优化与注意事项

6.1 减少 DOM 操作

若折叠内容包含大量动态元素，建议通过 hidden.bs.collapse 事件在折叠关闭时清理资源：

$('#dynamicContent').on('hidden.bs.collapse', function() {
  $(this).empty(); // 清空内容以释放内存
});

6.2 兼容性与回退方案

Bootstrap4 支持 IE9+ 及现代浏览器。若需兼容旧版 IE，可通过 Polyfill 库补充 CSS 动画功能。

结论

Bootstrap4 折叠凭借其简洁的语法和强大的功能，成为构建交互式网页的利器。无论是基础的单面板展开，还是复杂的多级联动场景，开发者均可通过合理利用数据属性、事件监听和 CSS 自定义，快速实现高效、美观的交互效果。掌握这一功能，不仅能提升代码效率，更能为用户带来更流畅的浏览体验。

如需进一步探索，可参考官方文档 Bootstrap Collapse ，或尝试将其与 Vue.js、React 等前端框架结合，解锁更多可能性。