一个jquery的手风琴效果
已经有很多了 这里做个代码备忘
<!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>手风琴效果</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 type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.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>
<script>
$(function(){
$(".dd-title:not(:first)").hide();
$(".dd-title:first").show();
$(".dt-title a").click(function(){
$(".dd-title:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
})
})
</script>
</body>
</html>
