<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery手风琴效果-www.jb200.com</title>
<style>
body,ul,div,li,dt,dd,dl{ margin:0; padding:0;}
ul,li{ list-style:none;}
.container{width:400px; overflow:hidden; margin:20px auto 0;}
.dl-all{ width:400px; overflow:hidden;}
.dt-title{width:400px; background:#73c5e5; height:30px;
line-height:30px;margin-top:2px;}
.dt-title a{ display:block; text-decoration:none; font-size:16px;}
.list li{ width:398px; height:25px; overflow:hidden;}
.dd-title{border: 1px solid #73C5E5; width:398px;}
.hide{ display:none;}
</style>
<script src="jquery-1.5.2.min.js"></script>
</head>
<body>
<div class="container">
<dl class="dl-all">
<dt class="dt-title"><a href="#">JQuery</a></dt>
<dd class="dd-title">
<ul class="list">
<li><a href="#" target="_blank">11111</a></li>
<li><a href="#" target="_blank">22222</a></li>
<li><a href="#" target="_blank">33333</a></li>
</ul>
</dd>
<dt class="dt-title"><a href="#">
javascript</a></dt>
<dd class="dd-title hide">
<ul class="list">
<li><a href="#" target="_blank">11111</a></li>
<li><a href="#" target="_blank">22222</a></li>
<li><a href="#" target="_blank">33333</a></li>
</ul>
</dd>
<dt class="dt-title"><a href="#">YUI</a></dt>
<dd class="dd-title hide">
<ul class="list">
<li><a href="#" target="_blank">11111</a></li>
<li><a href="#" target="_blank">22222</a></li>
<li><a href="#" target="_blank">33333</a></li>
</ul>
</dd>
<dt class="dt-title"><a href="#">ExtJs</a></dt>
<dd class="dd-title hide">
<ul class="list">
<li><a href="#" target="_blank">11111</a></li>
<li><a href="#" target="_blank">22222</a></li>
<li><a href="#" target="_blank">33333</a></li>
</ul>
</dd>
</dl>
</div>
