实现一个简单的手风琴 (Accordion)-JavaScript中文网-JavaScript教程资源分享门户

实现一个简单的手风琴 (Accordion)

推荐答案

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ----- --------------- ---------------------------- -------------------
    ---------------- ---------------
    -------
        ---------- -
            ------ -----
            ---------- ------
            ------- - -----
        -
        --------------- -
            ------- --- ----- -----
            -------------- -----
        -
        ----------------- -
            -------- -----
            ----------------- --------
            ------- --------
            -------- -----
            ---------------- --------------
            ------------ -------
        -
        ------------------ -
            -------- -----
            -------- -----
        -
        ---------------------- ------------------ -
            -------- ------
        -
    --------
-------
------

---- ------------------
    ---- -----------------------
        ---- -------------------------
            ------------- --------
            --------------
        ------
        ---- --------------------------
            ---------- --- ------- ------
        ------
    ------
    ---- -----------------------
        ---- -------------------------
            ------------- --------
            --------------
        ------
        ---- --------------------------
            ---------- --- ------- ------
        ------
    ------
    ---- -----------------------
        ---- -------------------------
            ------------- --------
            --------------
        ------
        ---- --------------------------
            ---------- --- ------- ------
        ------
    ------
------

--------
    ------------------------------------------------------------- -- -
        -------------------------------- -- -- -
            ----- ------------- - ---------------------
            -----------------------------------------
        ---
    ---
---------

-------
-------

本题详细解读

HTML 结构

<div class="accordion">: 这是手风琴的容器，包含了所有的手风琴项。
<div class="accordion-item">: 每个手风琴项，包含一个标题和内容。
<div class="accordion-header">: 手风琴项的标题部分，用户可以点击它来展开或折叠内容。
<div class="accordion-content">: 手风琴项的内容部分，默认是隐藏的，当用户点击标题时会显示。

CSS 样式

.accordion: 设置手风琴的宽度和居中显示。
.accordion-item: 设置每个手风琴项的边框和外边距。
.accordion-header: 设置标题的样式，包括背景颜色、内边距和鼠标指针样式。
.accordion-content: 设置内容的样式，默认情况下内容是不可见的。
.accordion-item.active .accordion-content: 当手风琴项处于激活状态时，内容会显示出来。

JavaScript 逻辑

document.querySelectorAll('.accordion-header'): 获取所有手风琴项的标题。
header.addEventListener('click', () => {...}): 为每个标题添加点击事件监听器。
accordionItem.classList.toggle('active'): 当用户点击标题时，切换手风琴项的激活状态，从而显示或隐藏内容。

通过这种方式，用户可以点击手风琴的标题来展开或折叠内容，实现了一个简单的手风琴效果。

纠错
反馈