代码简介：来自百度百科的目录显示/隐藏效果，效果不错，百科经常看了，大家都知道了。
代码内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>来自百度百科的目录显示/隐藏效果_网页代码站(www.webdm.cn)</title>
<style type="text/css">
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
p{line-height:24px;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#3366cc;}
a:hover{color:#ef9b11; }
.text_dir {
BORDER-RIGHT: #dedfe1 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #dedfe1 1px solid; DISPLAY: inline; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM:
0px;BORDER-LEFT: #dedfe1 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #dedfe1 1px solid; POSITION: relative; left:35%;; margin:20px auto;}
.text_dir P {
PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; MARGIN: 12px 0px 4px; LINE-HEIGHT: 30px; PADDING-TOP: 0px
}
.text_dir P SPAN {
FONT-WEIGHT: normal; FONT-SIZE: 12px; MARGIN-LEFT: 5px; COLOR: #36c
}
.text_dir DL {
PADDING-RIGHT: 20px; PADDING-LEFT: 15px; BACKGROUND: #fff; PADDING-BOTTOM: 20px; PADDING-TOP: 0px
}
.text_dir DD {
PADDING-LEFT: 12px; BACKGROUND: url(http://www.webdm.cn/images/20100920/bgs3.gif) no-repeat 2px -327px; LINE-HEIGHT: 20px; POSITION: relative
}
.text_dir OL {
PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; FILTER: Alpha(Opacity=10); PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; TEXT-INDENT: 20px; PADDING-TOP:
0px; LIST-STYLE-TYPE: none; opacity: .1
}
.text_dir DL.arr {
BACKGROUND: url(http://www.webdm.cn/images/20100920/word_arr.gif) #fff no-repeat right bottom
}
.text_dir #holder2 {
BORDER-RIGHT: #dedfe1 1px solid; BORDER-TOP: #dedfe1 1px; DISPLAY: none; LEFT: -1px; BORDER-LEFT: #dedfe1 1px solid; BORDER-BOTTOM: #dedfe1 1px solid; POSITION:
absolute; TOP: 47px
}
.text_dir .temp {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px
}
.text_dir .data LI {
PADDING-LEFT: 12px; BACKGROUND: url(http://www.webdm.cn/images/20100920/bgs3.gif) #fff no-repeat 2px -327px; ZOOM: 1
}
.text_dir .data LI LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
</style>
<script src="http://www.webdm.cn/images/20100920/tangram-1.1.0.js" type="text/javascript"></script>
<script src="http://www.webdm.cn/images/20100920/base.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<fieldset class="text_dir" id="catalog">
<p>麦田圈 maitianquan.com <span>[<a href="javascript:void(0)" id="dir_alt" onClick="lemma.catalog.showCatalog();">隐藏</a>]</span></p>
<dl id="holder1">
<dd><a href="#">麦田圈简介</a></dd>
<dd><a href="#">形成原因</a><ol><li><a href="#">一是磁场说。</a></li><li><a href="#">二是龙卷风说。</a></li><li><a href="#">三是外星制造说。</a></li><li><a
href="#">四是异端说。 </a></li><li><a href="#">五是流传较为广泛的说法是人造说。</a></li></ol></dd>
<dd><a href="#">麦田圈的资料及历史</a>
<ol><li><a href="#">水母形状的“麦田怪圈”</a></li><li><a href="#">麦田圈之谜破解</a></li><li><a href="#">麦田怪圈是种行为艺术？</a></li><li><a href="#">麦田怪圈
成因又有新说法</a></li><li><a href="#">麦田怪圈惊现英国</a></li><li><a href="#">神秘标志</a></li></ol>
</dd>
<dd><a href="#">麦田圈的特征</a>
<ol><li><a href="#">人工制造麦田怪圈赏</a></li><li><a href="#">非人造麦田圈的十大特征</a></li><li><a href="#">白鸦行动</a></li><li><a href="#">麦田怪圈的猜想
</a></li><li><a href="#">神秘的麦田怪圈</a></li><li><a href="#">破解麦田圈之谜破解</a></li><li><a href="#">英国出现凤凰涅磐状麦田怪圈</a></li><li><a href="#">麦田圈究竟来
自何方？</a> </li></ol>
</dd>
</dl>
<dl id="holder2"></dl>
</fieldset>
<script type="text/javascript">lemma.catalog.start();</script>
</div>
<p></p>
</center>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/d24f9189-55e8-40c1-8a8a-dcb39aba0315.html