html5的新加的标签：details的用法,两种方式的介绍，一种是直接css的实现，一种是js+css的实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
< header >导航</ header >
     < nav >菜单</ nav >
     < article >内容</ article >
     < footer >
         隐藏脚注
         < details >页面生成于2015-7-9</ details >< br />
         显示脚注
         < details  open = "open" >
             < summary >页面说明：</ summary >
             页面生成于2015/7/9
             summary是对details的详细说明
         </ details >
         < span  onClick = "span1_click()" >js脚本控制交互元素的使用脚注</ span >
         < details  id = "details1" >本页面生成时间：2015-7-9 11:27</ details >
         < script  type = "text/javascript" >
             function span1_click(){
                 var objD = document.getElementById("details1");
                 var attD = objD.getAttribute("open");
                 
                 if(attD != "open"){
                     objD.setAttribute("open","open");
                 }else{
                     objD.removeAttribute("open");
                 }
             }
         </ script >
     </ footer >

通用的css样式的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style type= "text/css" >
header, nav, article,footer{
     border : 1px  solid  #666 ;
     padding : 5px ;
}
header{
     width : 500px ;
}
nav{
     float : left ;
     width : 60px ;
     height : 100px ;
}
article{
     float : left ;
     width : 428px ;
     height : 100px ;
}
footer{
     clear : both ;
     width : 500px ;
}
details{
     overflow : hidden ;
     height : 0px ;
     padding-left : 200px ;
     position : relative ;
     display : block ;
}
details[open]{
     height : auto ;
}
span{
     cursor : pointer ;
}
</style>