查看更多评价 php_jquery实现点击查看更多内容控制段落文字展开折叠效果_jquery...

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

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

运行效果如下图所示：

具体代码如下：

jQuery文本段落展开和折叠效果

html,body,p,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;}

$(function(){

var slideHeight = 75; // px

var defHeight = $('#wrap').height();

if(defHeight >= slideHeight){

$('#wrap').css('height' , slideHeight + 'px');

$('#read-more').append('点击查看更多。。');

$('#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;

});

}

});

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.