Bootstrap 是一种流行的前端开发框架，它提供了许多功能强大、易于使用的组件。其中，手风琴菜单（Accordion）是一个常见且实用的组件，可以让用户在有限的空间内查看和操作大量的内容。
在本文中，我们将介绍如何使用 Bootstrap 实现手风琴菜单，并提供示例代码以供参考。
基本结构
手风琴菜单通常由若干个面板（Panel）组成，每个面板包含一个标题和内容区域。当用户点击标题时，该面板会展开或折叠，以显示或隐藏内容区域。只有一个面板可以处于展开状态，其他面板则处于折叠状态。
在 Bootstrap 中，手风琴菜单的基本结构如下所示：
-- -------------------- ---- -------
---- ----------------- ----------------------
---- -----------------------
--- ------------------------ ----------------
------- ------------------------ ------------- ------------------------- ----------------------------- -------------------- ----------------------------
----- -
---------
-----
---- ---------------- ------------------------- -------- ----- ---------------------------- -----------------------------------
---- -----------------------
------- -
------
------
------
---- -----------------------
--- ------------------------ ----------------
------- ----------------------- ---------- ------------- ------------------------- ----------------------------- --------------------- ----------------------------
----- -
---------
-----
---- ---------------- ------------------------- --------- ---------------------------- -----------------------------------
---- -----------------------
------- -
------
------
------
---- ---- --------- -------- ---
------上面的代码中，我们使用了 Bootstrap 的 accordion、accordion-item、accordion-header 和 accordion-button 类来定义手风琴菜单的基本结构。每个面板由一个 accordion-item 元素表示，其中的标题和内容区域分别包含在 accordion-header 和 accordion-body 元素中。
注意，在每个 accordion-button 中，我们都添加了 data-bs-toggle 和 data-bs-target 属性，用于指定点击按钮时要展开或折叠的内容区域。此外，我们还使用了 aria-expanded 和 aria-controls 属性，用于为屏幕阅读器提供有关手风琴菜单状态的信息。
JavaScript 动态操作
除了基本结构外，我们还需要一些 JavaScript 代码来实现手风琴菜单的动态操作。具体来说，我们需要在用户点击某个面板的标题时，折叠其他面板并展开该面板。如果用户再次点击已经展开的面板标题，则将其折叠。
在 Bootstrap 中，我们可以使用 collapse 插件来实现上述功能。该插件允许我们通过添加 .show 类来动态展开和折叠元素。
为了使用 collapse 插件，我们需要在 JavaScript 中初始化每个面板的折叠效果。以下是示例代码：
-- -------------------- ---- -------
----- ---------- - --------------------------------------------
------------------------------ -- -
----- ------ - --------------------------------------------
----- -------- - ----------------------------------------------
-- -------
--------------------------------- ------------------------------------ --- -------
-- ---------
-------------------------------- -- -- -
----- ---------- - ------------------------------------ --- ------
-- ------
-----------------------------------
- --------------------------------------------------------- --------
------------------------------------------------------------------------------