HTML5实现点击展开和隐藏

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34797972/article/details/84314374

HTML <details> 标签可以实现此功能

目前只有 Chrome 和 Safari 6 支持 <details> 标签。

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

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

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

<!DOCTYPE HTML>
<html>
<body>

<details>
<summary>点击我</summary>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</details>

</body>
</html>

 

展开阅读全文

没有更多推荐了,返回首页