jQuery实现DIV层收缩展开的方法
本文实例讲述了jQuery实现DIV层收缩展开的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现DIV层的收缩展开效果</title> <scripttype="text/javascript"src="/images/jquery.js"></script> <style> /*收缩展开效果*/ .text{line-height:22px;padding:06px;color:#666;} .boxh1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;} .box{position:relative;border:1pxsolid#e7e7e7;} </style> </head> <body> <scripttype="text/javascript"> //收缩展开效果 $(document).ready(function(){ $(".boxh1").toggle(function(){ $(this).next(".text").animate({height:'toggle',opacity:'toggle'},"slow"); },function(){ $(this).next(".text").animate({height:'toggle',opacity:'toggle'},"slow"); }); }); </script> <!--收缩展开效果--> <divclass="box"> <h1>收缩展开效果</h1> <divclass="text"> 1<br/> 2<br/> 3<br/> 4<br/> 5<br/> </div> </div> <br/> <divclass="box"> <h1>收缩展开效果</h1> <divclass="text"> 1<br/> 2<br/> </div> </div> <br> <fontcolor=red>第一次运行请刷新一下页面。</font> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。