Loading

HTML5 detail展开收缩,抛弃JS

作者:kevin   分类:前端乱炖   标签:HTML5    

目前只有Chrome版本12以上和Safari支持,IE,火狐,欧鹏都不支持。这个效果经常使用,但它总是用Javascript实现的。

代码结构如下:

<details open>
	<summary>展开/收缩</summary>
	这里是展开的内容
</details>

open表示默认展开

它允许我们在点击summary标签时显示和隐藏details里的其他内容。

不能嵌套使用。

summary标签会自动有个箭头,当你点击它时,下面的附加信息将会呈现,再次点击则隐藏。

FAQ页面中经常使用这个功能。
发表评论
评论列表(11)
2014-09-05 21:23

回复

跑步机

说得太专业了,看不懂啊

2014-09-30 11:33
2014-10-08 13:35

回复

谢亮

广告太多了

2014-11-26 09:21

回复

头条前瞻

就是一个字啊!!!!!!牛!

2014-12-23 10:05

回复

逗比秀

博主文章有点意思

2015-02-08 16:01

回复

逗比秀

说得太专业了,看不懂啊

2015-02-20 12:45

回复

小俊

快快乐乐过新年~

2015-02-24 14:05

回复

kiss

很好的例子

2015-03-11 17:04

回复

糖醋娱

我认真的看过了,有道理

2016-02-11 13:45

回复

213

随便看看

2017-09-25 13:14

回复

hahha

哈哈哈