HTML5 detail展开收缩,抛弃JS

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

代码结构如下:

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

open表示默认展开
它允许我们在点击summary标签时显示和隐藏details里的其他内容。
不能嵌套使用。
summary标签会自动有个箭头,当你点击它时,下面的附加信息将会呈现,再次点击则隐藏。
FAQ页面中经常使用这个功能。

预览

展开/收缩

这里是展开的内容

转自:bigk.cn

文章链接:https://www.sbkko.com/1-24.html
文章标题:HTML5 detail展开收缩,抛弃JS
文章版权:SBKKO 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

为TA充电
人已赞赏
WP文章文章

wordpress文章添加字体大小选项

2017-11-22 14:03:35

WP文章文章

wordpress文章自动添加关键词链接

2017-11-23 14:02:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索