<details>是HTML5的新标签,用于描述文档或文档某个部分的细节。
目前只有 Chrome 和 Safari 6 支持 <details> 标签。
与 <summary> 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。
值:
open:值为open,功能是定义details是否可见
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>交互元素details元素的使用</title> 6 <style type="text/css" > 7 body{font-size:12px;} 8 span{font-weight:bold;} 9 details{ 10 overflow:hidden; 11 height:0; 12 padding-left:200px; 13 position:relative; 14 display:block; 15 } 16 details[open]{height:auto;} 17 </style> 18 </head> 19 20 <body> 21 <span>隐藏</span> 22 <details> 23 <summary>我的网站</summary> 24 www.calamus.cn 25 </details> 26 <span>显示</span> 27 <details open="open"> 28 <summary>我的网站</summary> 29 www.calamus.cn 30 </details> 31 </body> 32 </html>
chrome下的效果图