在前端开发中，我们经常需要实现一些可收缩展开的效果来提升用户体验。Bootstrap 提供了一个非常方便的组件：Accordion（手风琴），其可以让用户点击标题栏来切换内容的展示状态。本文将介绍如何使用 Bootstrap.js 实现 Accordion 的收缩、展开功能。
前置条件
在开始之前，请确保你已经导入了 Bootstrap，并且已经按照官方文档正确地配置了 JavaScript 相关的文件。
HTML 结构
首先，我们需要在 HTML 中创建一个 Accordion 的基础结构。在其中，每个折叠面板都需要包含一个标题和一个内容区域。
以下是一个简单的 HTML 示例：
-- -------------------- ---- -------
---- ---------------
---- -------------
---- ------------------- ----------------
--- -------------
------- ---------- --------- ---------------------- -------------------------- -------------------- ----------------------------
---- - --
---------
-----
------
---- ---------------- --------------- ----- ---------------------------- -------------------------
---- ------------------
---- - --
------
------
------
---- -------------
---- ------------------- ----------------
--- -------------
------- ---------- -------- ---------- ---------------------- -------------------------- --------------------- ----------------------------
---- - --
---------
-----
------
---- ---------------- ---------------- ---------------------------- -------------------------
---- ------------------
---- - --
------
------
------
------我们在一个 div 容器中创建了两个 card 元素，每个 card 元素都包含一个标题和一个内容区域。标题使用 Bootstrap 的 card-header 样式，而内容区域则使用 collapse 样式。
标题中的按钮使用了 btn 和 btn-link 样式来去除默认样式，并且添加了 data-toggle 和 data-target 属性来指定要切换的内容区域。
每个内容区域都需要设置一个唯一的 id，同时在标题按钮上设置 aria-controls 属性来关联它们。在容器元素中设置 data-parent 属性来指定 Accordion 的父级容器。
JavaScript 实现
接下来，我们需要编写一些 JavaScript 代码来实现 Accordion 的收缩和展开功能。Bootstrap 提供了一些事件来处理这些操作。
show.bs.collapse
当某个内容区域被展开时，Bootstrap 会触发 show.bs.collapse 事件。我们可以使用该事件来修改标题按钮的样式。
$('#accordion').on('show.bs.collapse', function (e) {
var $target = $(e.target);
var $button = $('[data-target="#' + e.target.id + '"]');
$button.addClass('active');
});在上面的代码中，我们首先获取到了被展开的内容区域的 jQuery 对象 $target，然后通过它的 id 属性找到了对应的标题按钮。最后，我们为该按钮添加了一个 active 样式，用于标识当前处于展开状态。
hide.bs.collapse
当某个内容区域被收缩时，Bootstrap 会触发 hide.bs.collapse 事件。我们可以使用该事件来还原标题按钮的样式。
$('#accordion').on('hide.bs.collapse', function (e) {
var $target = $(e.target);
var $button = $('[
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/29958) ，转载请注明来源
[https://www.javascriptcn.com/post/29958](https://www.javascriptcn.com/post/29958)