html 缩小展开效果,jQuery实现DIV层的收缩展开效果

jQuery实现DIV层的收缩展开效果_网页代码站(www.webdm.cn)

/* 收缩展开效果 */

.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{position:relative;border:1px solid #e7e7e7;}

// 收缩展开效果

$(document).ready(function(){

$(".box h4").toggle(function(){

$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

},function(){

$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

});

});

收缩

1

2

3

4

5

6

7

8

9

收缩

1

2

3

4

5

6

7

8

9