只需要引入jquery-1.3.2.min.js即可实现效果;
<head>
<title></title>
<style type="text/css">
dl { width: 150px; }
dl,dd { margin: 0; }
dt { background: gray; font-size: 14px; padding: 2px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000;font-size: 12px; }
ul { list-style: none; padding: 2px; }
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("dd:not(:first)").hide();
$("dt a").click(function () {
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
})
})
</script>
</head>
<body>
<dl>
<dt><a href="#">水果</a></dt>
<dd>
<ul>
<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>
</ul>
</dd>
<dt><a href="#">颜色</a></dt>
<dd>
<ul>
<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>
</ul>
</dd>
<dt><a href="#">班级</a></dt>
<dd>
<ul>
<li><a href="#">net</a></li>
<li><a href="#">php</a></li>
<li><a href="#">java</a></li>
<li><a href="#">3G</a></li>
<li><a href="#">嵌入式</a></li>
<li><a href="#">对日</a></li>
</ul>
</dd>
</dl>
</body>
</html>
下面就是效果图: