HTML5实现点击展开和隐藏

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>

 

猜你喜欢

转载自blog.csdn.net/qq_34797972/article/details/84314374