不知道HTML5+CSS3能不能完成,还没有研究过。网上参考到的是用JS来实现的。主要是JS获取事件,改变属性,印象显示/隐藏的发生。
JS比较高层的使用如下:
HTML DOM Style 对象
Style 对象
Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。
使用 Style 对象属性的语法:
document.getElementById("id").style.property="值"
通过上面的语句,获取id这个对象,然后设置其style。
Layout 属性
display | 设置元素如何被显示 |
定义和用法
display 属性设置元素如何显示。
语法:
Object.style.display=value
下面看看能使用的值。
Possible Values
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | 此元素会根据上下文作为块级元素或内联元素显示。 |
marker | |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
下面有个实例代码
<!DOCTYPE HTML>
<head>
<meta charset=utf-8" >
<script type="text/javascript">
function openShutManager(oSourceObj,oTargetObj,shutAble){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
if(targetObj.style.display!="none"){
if(!shutAble) return;
targetObj.style.display="none";
} else {
targetObj.style.display="table";
}
}
</script>
<title>展开/收起</title>
</head>
<body>
<p οnclick="openShutManager(this,'Elf32_Ehdr',true)">
typedef struct {<br>
<p id="Elf32_Ehdr" style="display:none">
unsigned char e_ident[16];<br>
Elf32_Half e_type;<br>
Elf32_Half e_machine;<br>
Elf32_Word e_version;<br>
Elf32_Addr e_entry;<br>
Elf32_Off e_phoff;<br>
Elf32_Off e_shoff;<br>
Elf32_Word e_flags;<br>
Elf32_Half e_ehsize;<br>
Elf32_Half e_phentsize;<br>
Elf32_Half e_phnum;<br>
Elf32_Half e_shentsize;<br>
Elf32_Half e_shnum;<br>
Elf32_Half e_shstrndx;<br>
</p>
}Elf32_Ehdr;<br>
</body>
</html>
</body>