CSS+JS制作可折叠内容块

代码解析

HTML 代码部分

<div class="save">

<h1><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<span class="dspchar">+</span> heading</a></h1>
<div class="dspcont">section</div>
<!--以上部分是第一个heading,h1中有个onclick触发了JS中的dsp(loc)函数,初始的+号是在class为dspcont的<span>里的,初始隐藏的内容则是在class为dspcont的div里的-->

<h1><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<span class="dspchar">+</span> heading</a></h1>
<div class="dspcont">

<h2><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<span class="dsphead">+</span> heading</a></h2>
<div class="dspcont">section</div>

<h2><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<span class="dspchar">+</span> heading</a></h2>
<div class="dspcont">section</div>
</div>
</div>

CSS代码部分

.save{
behavior:url(#default#savehistory);}
/*防止后退时清空该范围内的text内容[这里为什么用到这个不是很明白...]*/

a.dsphead{
text-decoration:none;
margin-left:1.5em;}
/*对连接样式的设置*/

a.dsphead:hover{
text-decoration:underline;}
/*连接hover的状态*/

a.dsphead span.dspchar{
font-family:monospace;
font-weight:normal;}
/*设置head和符号的字体*/

.dspcont{
display:none;
margin-left:1.5em;}
/*设置内容部分初始样式,display是none*/

JS代码部分

<script type="text/javascript"><!--
function dsp(loc){
if(document.getElementById){
foc=loc.firstChild.innerHTML?
loc.firstChild:
loc.firstChild.nextSibling;/*使foc为当前点的下一个子元素的innerHTML也就是那个带+符号的<span>的innerHTML*/
foc.innerHTML=(foc.innerHTML=='+')?'-':'+';/*判断<span>里的内容是-还是+号,是+就变-,是-就变+*/
foc=loc.parentNode.nextSibling.style?
loc.parentNode.nextSibling:
loc.parentNode.nextSibling.nextSibling;/*将判断位置移动到<a>的父兄(就是h1后面的隐藏div)*/
foc.style.display=foc.style.display=='block'?'none':'block';}/*判断div的display是none还是block,设置为相反的值*/}

if(!document.getElementById)
document.write('<style type="text/css"><!--\n'+
'.dspcont{display:block;}\n'+
'//--></style>');
//--></script>/*针对不支持DOM的浏览器，将隐藏内容全部显示*/

<noscript>
<style type="text/css"><!--
.dspcont{display:block;}
//--></style>/*针对不支持js的浏览器，将隐藏内容显示*/
</noscript>