details元素默认样式效果演示页面

展示

提问交流 »

这是摘要1

这里具体描述，标签相对随意，例如这里使用的<p>标签。

这是摘要2

这里<details>标签设置了HTML布尔属性open，因此，默认是展开状态。

如果<summary>缺省，则会自动补上。

代码

HTML：

<details>
    <summary>这是摘要1</summary>
    <p>这里具体描述，标签相对随意，例如这里使用的&lt;p&gt;标签。</p>
</details>

<details open>
    <summary>这是摘要2</summary>
    <content>这里&lt;details&gt;标签设置了HTML布尔属性open，因此，默认是展开状态。</content>
</details>

<details open>
    <p>如果&lt;summary&gt;缺省，则会自动补上。</p>
</details>

<details open>
    <summary hidden></summary>
    <p>如果&lt;summary&gt;缺省，则会自动补上。</p>
</details>