Html使用 details,summary标签达到显示隐藏效果

根据W3C的描述定义

<details> 标签用于描述文档或文档某个部分的细节

提示:与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

<summary> 标签包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。

提示:请与 <details> 标签一起使用。标题是可见的,当用户点击标题时会显示出详细信息。

注释:”summary” 元素应该是 “details” 元素的第一个子元素。

open 又可定义details是否可见

我们可以看到 加open 的直接显示了摘要的内容,不加open的则先把摘要的内容隐藏起来

 

摘要

描述

摘要1

描述1。

 

demo演示:/demo/bqys/

点赞

发表评论