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

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

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

运行效果如下图所示：

具体代码如下：

！DOCTYPE html heart heta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /titlejQuery文本段落展开和折叠效果/titlestylehtml，body，div，h2，p { margin : 0；padd : 0；}html{font: 1em Arial，Helvetica，无衬线；color : # 444 } a { color : # 0087 f1 } p { margin-bottom : 5px；} #容器{ margin: 0 auto宽度： 600像素；} #容器H2 { font size : 20px；color : # 0087 f1 } # wrap { position : relativepadding : 10px飞越：隐藏；} #渐变{宽度： 100%；height : 35pxbackground : URL()-repeat-x；绝对位置：底部： 0；左： 0；} # read-more { padd : 5px；边框-top: 4px双# ddd背景# fffcolor : # 333 } # read-more a { padding-right : 22px；背景： URL()-不重复100% 50%;字体粗细：粗体；文本装饰：无；} #阅读更多a:悬停{ color: # 000}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ var slide height=75；//px var defHeight=$('#wrap ').高度();if(defHeight=幻灯片高度){ $(' # wrap ').css('高度'，幻灯片高度' px ')；$('#read-more ').追加(' a href='# '点击查看更多。/a '；$('#read-more a ').单击(function(){ var curHeight=$(' # wrap ').高度();if(curHeight==幻灯片高度){ $(' #换行').动画({ height: defHeight }，' normal ')；$('#read-more a ').html(")点击隐藏');$(' #渐变').淡出()；}else{ $('#wrap ').动画({ height: slideHeight }，' normal ')；$('#read-more a ').html(")点击查看更多。');$(' #渐变').fadeIn()；}返回false })；}});/script/head body div id=' container ' h1jQuery控制段落文字展开折叠，点击查看更多的功能/h1 H2关于比拉邦/H2 div id=' wrap ' div pGordon开发了自己的缝合技术，使服装更耐用、更具成本效益且劳动强度更低。他雇佣了机械师，将业务转移到一家工厂，建立了一个分销网络，并赞助了一个著名的澳大利亚冲浪者团队。生意兴隆/p .从这些开端开始比拉邦就扩大了产品范围，包括潜水服、手表、冲浪板、滑雪板外套和滑板服装等木板运动产品/p/div div id=' grade '/div/div id=' read-more '/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。