jquery收缩展开效果实例代码

在jquery中收缩展开效果我们会使用到toggle()方法即可了，下面我来给大家演示两个基于jquery的收缩展开效果代码，希望对大家有所帮助。主要代码就那点，这个只是个简单的特效，后期可以衍生很多复杂的，前端开发需要大家自己慢慢摸索，多动手，亲们慢慢折腾吧。

$(document).ready(function(){
   $(".box h1").toggle(function(){
     $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
   },function(){
   $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
   });
});

上面是核心代码,下面我们来看完整实例

<style>
body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff}
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{height:0;overflow:hidden;clear:both;}
/* 收缩展开效果 */
.text{line-height:22px;padding:0 6px;color:#666;}
.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{width:600px;position:relative;border:1px solid #e7e7e7;margin:20px auto}
</style>

<!-- 收缩展开效果 -->
<div class="box">
    <h1>jquery收缩展开效果第一层</h1>
 <div class="text">
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
 </div>
</div>
<br />
<div class="box">
    <h1>jquery收缩展开效果第二层</h1>
 <div class="text">
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
 </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
   $(".box h1").toggle(function(){
     $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
   },function(){
   $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
   });
});
</script>