手风琴是一种常用的前端UI组件，可以将多个折叠面板合并成一个面板，同时保证其中只有一个面板处于展开状态。本文将介绍如何使用原生JS实现手风琴组件，并支持横纵向调用。
实现思路
手风琴组件的核心是对折叠面板的展开与收起进行控制。我们可以通过添加click事件监听器来实现点击面板时展开或收起面板的效果。
具体步骤如下：
- 获取所有面板元素，使用
querySelectorAll函数实现。 - 对每个面板元素添加
click事件监听器，在监听器中判断该面板是否已经展开，如果已经展开，则收起面板；否则展开面板。 - 记录当前展开的面板，确保每次只有一个面板处于展开状态。
对于支持横纵向调用的手风琴组件，我们需要增加一些逻辑，根据参数决定是横向还是纵向展示，并且在计算面板高度或宽度时根据方向选择不同的属性名。
代码实现
以下为手风琴组件的完整代码实现。其中，accordion函数可以接受两个参数：面板元素选择器和选项对象。选项对象包含两个属性：direction和activeIndex，分别用于指定手风琴的方向和初始展开面板的索引。
-- -------------------- ---- -------
-------- ------------------- ------- - --- -
----- ------ - ------------------------------------
----- - --------- - ----------- ----------- - - - - --------
--- ------------------ - -----
-------- ------------------ -
-- ------ --- ------------------- -------
-- -------------------- -
----------------------------------------------
------------------------------------------------ - ---
-
------------------------------
----------------------------------- - ------------------- - -----
------------------ - ------
-
-------- ------------------- -
------ --------- --- ---------- - ------------------ - ------------------
-
-------- ---------------------- -
------ --------- --- ---------- - -------- - --------
-
---------------------- ------ -- -
------------------------------- -- -- -
-------------------
---
-- ------ --- ------------ -
-------------------
-
---
-使用示例
使用手风琴组件非常简单，只需要在HTML中定义折叠面板的结构，并调用accordion函数即可。
以下为一个垂直方向的手风琴组件的示例代码：
-- -------------------- ---- -------
---- ------------------
---- --------------
---- -------------------------- -------
---- ----------------------
----- ----- ----- --- ----- ----------- ---------- -----
------
------
---- --------------
---- -------------------------- -------
---- ----------------------
--- -- ------- ------ ---------- -- ------ -- ------ ----- -------
------
------
---- --------------
---- -------------------------- -------
---- ----------------------
-- ---- -- ----- ------- ---- ------- ------------ ------- ------- ---- -- ------- -- -- ------- ----------
------
------
------
--------
--------------------- -------- - ---------- ----------- ------------ - ---
---------以下为一个横向的手风琴组件的示例代码：
-- -------------------- ---- -------
---- ---------------- ------------
---- --------------
---- -------------------------- -------
---- ----------------------
----- ----- ----- --- ----- ----------- ---------- -----
------
------
---- --------------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------