前端菜鸟
HTML5–》details
是HTML5的新标签，用于描述文档或文档某个部分的细节。
目前只有 Chrome 和 Safari 6 支持
标签。
配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
与
配合使用可以为 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下的效果图
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>
本文由 Calamus 作者：calamus 发表，转载请注明来源！
calamus
文章：81 画廊：1
