本文实例讲述了jQuery实现DIV层收缩展开的方法。分享给大家供大家参考。具体实现方法如下： 复制代码 代码如下: jQuery实现DIV层的收缩展开效果 <br /> /* 收缩展开效果 */<br /> .text{line-height:22px;padding:0 6px;color:#666;}<br /> .box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}<br /> .box{position:relative;border:1px solid #e7e7e7;}<br /> <br /> // 收缩展开效果<br /> $(document).ready(function(){<br /> $(".box h1").toggle(function(){<br /> $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");<br /> },function(){<br /> $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");<br /> });<br /> });<br /> 收缩展开效果 1 2 3 4 5 收缩展开效果 1 2 第一次运行请刷新一下页面。 希望本文所述对大家的jquery程序设计有所帮助。
