在 Web 开发中，我们经常需要创建可折叠的内容块，以便用户可以展开或收起特定部分的信息。HTML5 中的 <details> 元素就是为此而设计的，而 open 属性则用于控制这个内容块是否默认展开。
什么是 <details> 元素
<details> 元素是一个可以包含可见或隐藏信息的容器元素。它包含一个包裹在其中的 <summary> 元素，用于显示标题或概要，以及一些内容，这些内容可以被用户展开或收起。
<details> <summary>点击展开/收起</summary> <p>这里是一些可以展开或收起的内容。</p> </details>
在浏览器中呈现的效果如下：
<details> <summary>点击展开/收起</summary>这里是一些可以展开或收起的内容。
</details>使用 open 属性
open 属性是一个布尔属性，用于指定 <details> 元素是否默认展开。当该属性存在时，内容块会默认展开；当该属性不存在时，内容块会默认收起。
-- -------------------- ---- ------- -------- ----- --------------------------- ------------------ ---------- --------- --------------------------- ------------------ ----------
在浏览器中呈现的效果如下：
<details> <summary>默认展开的内容块</summary>这个内容块会默认展开。
</details> <details> <summary>默认收起的内容块</summary>这个内容块会默认收起。
</details>使用 JavaScript 动态控制 open 属性
除了静态地在 HTML 中设置 open 属性外，我们还可以使用 JavaScript 动态地控制 <details> 元素的展开和收起。
-- -------------------- ---- -------
-------- ---------------
------------------------------
---------------------
----------
------- ----------------------------------------
--------
-------- --------------- -
--- ------- - -------------------------------------
------------ - --------------
-
---------点击按钮后，内容块会展开或收起。
结语
通过 <details> 元素和 open 属性，我们可以轻松地创建具有可折叠功能的内容块，为用户提供更好的交互体验。同时，结合 JavaScript 动态控制 open 属性，我们可以实现更加灵活的展开和收起效果。希望本文能帮助你更好地应用 details 和 open 属性在你的 Web 开发项目中。