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

本文实例讲述了jquery实现点击查看更多内容控制段落文字展开折叠效果。分享给大家供大家参考。具体如下：

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

运行效果如下图所示：

具体代码如下：

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;}





 
  jQuery 控制段落文字展开折叠，点击查看更多的功能
  about Billabong
  
   
    
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.
    
Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.
   
   
  
  
 

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