在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> |
