<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js文本段落展开和收拢效果</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<style>
.container {
margin: 0 auto;
width: 600px;
border: 1px solid #3bb2d0;
}
.wrap {
position: relative;
padding: 10px;
overflow: hidden;
}
.read-more {
padding: 5px;
background: #fff;
color: #333;
}
.read-more a {
padding-right: 22px;
no-repeat 100% 50%;
font-weight: bold;
text-decoration: none;
}
.read-more a: hover {
color: #000;
}
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<div>
<h1>这一段文字是可以折叠展开的，点击下面的“更多”就可以展开，点击下面的“折叠”就可以折叠</h1>
</div>
</div>
<div class="read-more"></div>
</div>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script>
$(function() {
var slideHeight = 45; // 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('折叠');
} else {
$('.wrap').animate({
height: slideHeight
}, "normal");
$('.read-more a').html('更多');
}
return false;
});
}
});
</script>
</body>
</html>
<!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>
</head>
<body>
<div class="container">
<h1>jQuery 控制段落文字展开折叠，点击查看更多的功能</h1>
<div class="wrap">
<div>
<p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>
<div class="gradient"></div>
</div>
<div class="read-more"></div>
</div>
<div class="container">
<h1>jQuery 控制段落文字展开折叠，点击查看更多的功能</h1>
<div class="wrap">
<div>
<p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>
<div class="gradient"></div>
</div>
<div class="read-more"></div>
</div>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
.center{
margin:0 auto;
width: 300px;
}
</style>
</head>
<body>
<div class="center">
<div style="display: block;" id="smallContent">
<span style="font-size: 9pt">
<b>专辑介绍：</b>
青春光影是由中国80后影像精英共同组建的新媒体影视摄制机构。机构成立于2006年1月1日，主要从事高清数字...
[<a href="javascript:" onclick="document.all.fullContent.style.display=(document.all.fullContent.style.display=='none')?'':'none';document.all.smallContent.style.display=(document.all.smallContent.style.display=='none')?'':'none'" >详细介绍</a>]
</span>
</div>
<div style="display: none;" id="fullContent">
<span style="font-size: 9pt">
<b>专辑介绍：</b>青春光影是由中国80后影像精英共同组建的新媒体影视摄制机构。机构成立于2006年1月1日，主要从事高清数字电影、电视剧、新媒体系列剧、３G流媒体视频、创意广告片、MV的拍摄与制作。机构先后与中国电影电视（韩国）公司株式会社、韩国电影振兴委员会、中国网通、中国艺人网等单位结成战略合作伙伴关系，致力于创作新生代的数字影视作品及新媒体影视作品，打造中国80后新生代影视文化产业链。机构先后拍摄了大量青春喜剧风格的影视作品，受到国内外青年观众的热捧。其中公益校园电影《释放的百合心》荣获年度中国最佳DV电影奖、最佳导演奖、最佳表演奖三项大奖，中央电视台等近百家媒体先后做过专题报道，近千家网站转载。同时由青春光影联合武汉大学共同摄制的大型校园喜剧电影《大话三国之校园大战》更是突破传统电影的拍摄运作模式，向世人展示了一种全新的大众影像。机构将在明后两年陆续推出100部新媒体系列剧、5部高清数字电影、3部青春偶像电视剧及500部3G流媒体短片。
[<a href="javascript:" onclick="document.all.fullContent.style.display=(document.all.fullContent.style.display=='none')?'':'none';document.all.smallContent.style.display=(document.all.smallContent.style.display=='none')?'':'none'" >隐藏介绍</a>]
</span>
</div>
</body>
</html>