如何使用 HTML5 的 details 和 summary 标签创建一个可折叠的内容区域？

推荐答案

<details>
  <summary>点击展开/收起</summary>
  <p>这是可折叠的内容区域，点击 summary 标签可以展开或收起。</p>
</details>

本题详细解读

details 和 summary 标签是 HTML5 中用于创建可折叠内容区域的语义化标签。

• details 标签:
  • 它作为一个容器，包含可折叠的内容以及 summary 标签。
  • 默认状态下，details 标签的内容是折叠的。
  • 当 details 元素的 open 属性存在时，内容会展开，用户可以通过点击 summary 标签来切换展开/折叠状态，或者通过 details 元素的 open 属性来控制。
  • details 标签本身并没有规定折叠内容的样式，可以使用 CSS 来自定义其外观。
• summary 标签:
  • summary 标签必须作为 details 标签的第一个子元素。
  • 它是可点击的，用户通过点击该标签来展开/收起 details 标签的内容。
  • summary 标签中通常放置一个简短的标题或描述，提示用户其点击后会发生什么。
  • 浏览器会自动为 summary 标签添加一个展开/收起图标（通常是一个小箭头）。

使用示例

以下是一个稍微复杂的例子，包含更丰富的内容和 CSS 自定义：

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

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

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

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

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

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

在这个例子中，我们添加了CSS样式来改变 details 和 summary 标签的外观，并且使用了一个伪元素来显示箭头图标，并使用 details[open] 来改变箭头的方向。