用jquery的animate动画做成的左侧菜单伸缩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单伸缩实例</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
$(".two1").toggle(function(){
$(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
$(".two2").toggle(function(){
$(".text1").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(".text1").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
});
</script>
<style>
*{padding:0;margin:0;color:#000;}
a{text-decoration:none;}
dl{background:#eee;width:100px;}
dt{font-weight:bold;cursor:pointer;}
dt,dd{width:100px;height:30px;line-height:30px;border-bottom:1px solid #ccc;}
</style>
</head>
<body>
<dl id="two">
<dt class="two1">指标库管理</dt>
<dd class="text"><a href="javascript:void(0)">单项工程指标</a></dd>
<dd class="text"><a href="javascript:void(0)">综合指标</a></dd>
<dd class="text"><a href="javascript:void(0)">单元指标</a></dd>
<span class="">
<dd class="text"><a href="javascript:void(0)">分部分项指标</a></dd>
<dd class="text"><a href="javascript:void(0)">工程量指标</a></dd>
</span>
<dd class="text"><a href="javascript:void(0)">指标审核</a></dd>
<dd class="text"><a href="javascript:void(0)">我的共享指标</a></dd>
<dt class="two2">市政管理</dt>
<dd class="text1"><a href="javascript:void(0)">单项工程指标</a></dd>
<dd class="text1"><a href="javascript:void(0)">综合指标</a></dd>
<dd class="text1"><a href="javascript:void(0)">单元指标</a></dd>
<span>
<dd class="text1"><a href="javascript:void(0)">分部分项指标</a></dd>
<dd class="text1"><a href="javascript:void(0)">工程量指标</a></dd>
</span>
<dd class="text1"><a href="javascript:void(0)">指标审核</a></dd>
<dd class="text1"><a href="javascript:void(0)">我的共享指标</a></dd>
</dl>
</body>
</html>
