<div class="show">
<div class="demo">
<details>
<summary>这是摘要1</summary>
<p>这里具体描述,标签相对随意,例如这里使用的<p>标签。</p>
</details>
<details>
<summary>这是摘要2</summary>
<content>这里<details>标签设置了HTML布尔属性open,因此,默认是展开状态。</content>
</details>
<details>
<p>如果<summary>缺省,则会自动补上,文案是“详细信息”。</p>
</details>
</div>
</div>
body {
display: flex;
justify-content: center;
padding: 2vw;
}
.show{
padding-bottom:20px;
min-width: 50vw;
}
.show h5{
font-size:13px;
line-height:20px;
padding:10px 0 2px 2px;
margin:0 0 0 8px;
}
.demo{
padding:10px;
}
details {
margin: 1rem 0;
}
details:active,
details:focus,
summary:active,
summary:focus{
outline: none 0;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.