jquery实现点击查看更多内容控制段落文字展开折叠效果

本文实例讲述了jquery实现点击查看更多内容控制段落文字展开折叠效果。分享给大家供大家参考。具体如下：
这里使用jQuery实现的文字展开折叠效果，点击文字后文字内容会完整的显示出来，控制段落来显示文字，不需要的时候，可以再次点击后将内容折叠起来，也就是隐藏了一部分内容。点击查看更多的功能，在很多大网站都有在用，像一些电影简介、产品介绍有时候为了页面的布局效果，常常默认是隐藏了一部分，用户想看的时候可以点击后展开。
运行效果如下图所示：

具体代码如下：

<！DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery文本段落展开和折叠效果</title><style>html,body,div,h2,p{margin: 0;padding: 0;}html{font: 1em Arial, Helvetica, sans-serif;color: #444;}a{color: #0087f1;}p{margin-bottom: 5px;}#container{margin: 0 auto;width: 600px;}#container h2{font-size: 20px;color: #0087f1;}#wrap{position: relative;padding: 10px;overflow: hidden;}#gradient{width: 100%;height: 35px;background: url（） repeat-x;position: absolute;bottom: 0;left: 0;}#read-more{padding: 5px;border-top: 4px double #ddd;background: #fff;color: #333;}#read-more a{padding-right: 22px;background: url（） no-repeat 100% 50%;font-weight: bold;text-decoration: none;}#read-more a: hover{color: #000;}</style><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript">$（function（）{ var slideHeight = 75; // px var defHeight = $（"#wrap"）.height（）; if（defHeight >= slideHeight）{$（"#wrap"）.css（"height" , slideHeight + "px"）;$（"#read-more"）.append（"<a href="#">点击查看更多。。</a>"）;$（"#read-more a"）.click（function（）{ var curHeight = $（"#wrap"）.height（）; if（curHeight == slideHeight）{$（"#wrap"）.animate（{ height: defHeight}, "normal"）;$（"#read-more a"）.html（"点击隐藏"）;$（"#gradient"）.fadeOut（）; }else{$（"#wrap"）.animate（{ height: slideHeight}, "normal"）;$（"#read-more a"）.html（"点击查看更多。。"）;$（"#gradient"）.fadeIn（）; } return false;}）; }}）;</script></head><body> <div id="container"><h1>jQuery 控制段落文字展开折叠，点击查看更多的功能</h1><h2>About Billabong</h2><div id="wrap"> <div><p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p><p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p> </div> <div id="gradient"></div></div><div id="read-more"></div> </div></body></html>

希望本文所述对大家的jquery程序设计有所帮助。