介绍
jQuery UI Accordion 是一个常用的前端组件，可以在网页上实现类似手风琴的效果。默认情况下，Accordion 在用户点击某个面板时会展开该面板，同时收起其他面板。但是，有时我们希望添加一个“展开/收起全部”的按钮，方便用户快速操作。本文将介绍如何使用 jQuery 实现这一功能。
实现
HTML 结构
首先，我们需要一个基本的 HTML 结构，包含一个 Accordion 和一个按钮。
---- ---------------
----------- ------
-----
---
------ ------ ----- ------- --- -------- -- -------- ----- ----- -------
-- ------ ------- ---- ------ -------- ---- ------- --- ----------- ---
----- ----- --- - ----- ----- -------- ----- --- --- ----- ------- --- --
-----
----
------
----------- ------
-----
---
--- --- ----- ----- -- ----- --------- -- ------- ---------- --- ----
------ ------- ---------- ----- -- ------- -------- ------ ------ ---------
------ -------- -------- ------ ------ -- ------
----
------
----------- ------
-----
---
--- ---- ------ -------- --- ----- --- ------- --- ------ ------- --------
---- ---- ---- --- -------- ---- ---- --------- ------- ---- ---- -------
----- -- -------- ----- ------ ---- -----
----
------
------
------- ---------------------- ------------
------- -------------------------- ------------JavaScript 代码
接下来，我们需要编写 JavaScript 代码，实现“展开/收起全部”的功能。我们使用 jQuery 的 .accordion() 方法初始化 Accordion，并通过点击按钮触发展开或收起所有面板的事件。
---------- -- -
----------------------------
------------------------------- -- -
------------- ---------------------------------
------------- ----------------------------------
------------- -------------
---
--------------------------------- -- -
------------- ------------------------------------
------------- -------------------------------------
------------- -------------
---
---在代码中，我们首先使用 .accordion() 方法初始化 Accordion。然后，定义两个点击事件处理函数，分别对应“展开全部”和“收起全部”操作。这些事件处理程序通过添加或删除 ui-state-active 类来改变 Accordion 面板的状态，使其展开或收起。最后，我们使用 .show() 和 .hide() 方法来显示或隐藏面板内容。
示例代码
完整的示例代码如下：
--------- -----
------
------
----- --------------- --
------------- -- --------- --------------- -----------
----- ---------------- ------------------------------------------------------------ --
------- -----------------------------------------------------
------- ------------------------------------------------------------
-------
---------- -
------ ------
------- - -----
-
---------------- -
----------------- ---- -----------
-
--------
-------
------
---- ---------------
----------- ------
-----
---
------ ------ ----- ------- --- -------- -- -------- ----- -----
------- -- ------ ------- ---- ------ -------- ---- ------- ---
----------- --- ----- ----- --- - ----- ----- --------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------