文本收缩展开html,jQuery实现文本展开收缩特效

在网页上只有一个小区域，但是说明性的文字又很长，下面这段脚本实现的是长文字的部分显示。

当用户点击展开时，文字展开，收缩时文字收缩。

本来用jQuery自带的toggle()就可以写，但是我做的时候 toggle一直不work，所以就用了click + 标志位来做的

var cur_status = "less";

$.extend({

show_more_init:function(){

//alert("show_more_init!");

var charNumbers=$(".content").html().length;//总字数

var limit=100;//显示字数

if(charNumbers>limit)

{

var orgText=$(".content").html();//原始文本

var orgHeight=$(".content").height();//原始高度

var showText=orgText.substring(0,limit);//最终显示的文本

$(".content").html(showText);

var contentHeight=$(".content").height();//截取内容后的高度

$(".switch").click(

function() {

if(cur_status == "less"){

$(".content").height(contentHeight).html(orgText).animate({ height:orgHeight}, { duration: "slow" });

$(this).html("收缩");

cur_status = "more";

}else{

$(".content").height(orgHeight).html(showText).animate({ height:contentHeight}, { duration: "fast" });

$(this).html("展开");

cur_status = "less";

}

}

);

}

else

{

$(".switch").hide();

}

}

});

$(document).ready(function(){

$.show_more_init();

});

test

#limittext{

width:640px;

height:auto;

position:relative;

background-color:#ccc;

color:black;

}

.switch{

font-size:12px;

text-align:center;

cursor:pointer;

font-family:Verdana;

font-weight:800;

position:absolute;

bottom:0;

width:100%;

/*background:url(more-bg.png) repeat-x bottom;*/

height:40px;

line-height:80px;

}

这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字

展开

方法二：

jQuery实现DIV层的收缩展开效果

/* 收缩展开效果 */

.text{line-height:22px;padding:0 6px;color:#666;}

.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}

.box{position:relative;border:1px solid #e7e7e7;}

// 收缩展开效果

$(document).ready(function(){

$(".box h1").toggle(function(){

$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

},function(){

$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

});

});

收缩展开效果

1

2

3

4

5

收缩展开效果

1

2

第一次运行请刷新一下页面。

以上所述就是本文的全部内容了，希望大家能够喜欢。