在 HTML 中创建可收缩/展开的面板可以使用 <details>
和 <summary>
标签组合实现。其中,<summary>
标签用于定义面板的标题,<details>
标签用于包裹面板的内容。通过设置 open
属性可以指定默认情况下面板是否展开。例如:
<details>
<summary>面板标题</summary>
面板内容
</details>
在默认情况下,面板是收缩状态的。可以点击面板标题来展开面板。如果想要在默认情况下展开面板,可以将 open
属性设置为 open
,例如:
<details open>
<summary>面板标题</summary>
面板内容
</details>
需要注意的是,<details>
和 <summary>
标签在一些老版本的浏览器中可能不被支持,需要进行相应的兼容性处理。