本文實例講述了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程式設計有所幫助。
