<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现DIV层的收缩展开效果</title> <script type="text/javascript" src="https://www.jb51.net/images/jquery.js"></script> <style> /* 收缩展开效果 */ .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;} </style> </head> <body> <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> <!-- 收缩展开效果 --> <div> <h1>收缩展开效果</h1> <div> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> </div> </div> <br /> <div> <h1>收缩展开效果</h1> <div> 1<br /> 2<br /> </div> </div> <br> <font color=red>第一次运行请刷新一下页面。</font> </body> </html>
jQuery实现文本展开收缩特效(2)
内容版权声明：除非注明，否则皆为本站原创文章。