07 Jul 2014

HTML5 detail展开收缩，抛弃JS

目前只有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

很好的例子

2015-03-11 17:04

我认真的看过了，有道理

2016-02-11 13:45

随便看看

2017-09-25 13:14

hahha

哈哈哈