jQuery实现DIV层收缩展开的方法
本文实例讲述了jQuery实现DIV层收缩展开的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实现DIV层的收缩展开效果</title>
<scripttype="text/javascript"src="/images/jquery.js"></script>
<style>
/*收缩展开效果*/
.text{line-height:22px;padding:06px;color:#666;}
.boxh1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{position:relative;border:1pxsolid#e7e7e7;}
</style>
</head>
<body>
<scripttype="text/javascript">
//收缩展开效果
$(document).ready(function(){
$(".boxh1").toggle(function(){
$(this).next(".text").animate({height:'toggle',opacity:'toggle'},"slow");
},function(){
$(this).next(".text").animate({height:'toggle',opacity:'toggle'},"slow");
});
});
</script>
<!--收缩展开效果-->
<divclass="box">
<h1>收缩展开效果</h1>
<divclass="text">
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
</div>
</div>
<br/>
<divclass="box">
<h1>收缩展开效果</h1>
<divclass="text">
1<br/>
2<br/>
</div>
</div>
<br>
<fontcolor=red>第一次运行请刷新一下页面。</font>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。