代码如下（需要引入外部Jquery文件，大家自行完成吧）：

收缩展开效果_www.



/* 收缩展开效果 */
.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 h1").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

    




    收缩展开效果
    

        1

        2

    

您可能感兴趣的文章: