jQuery实现长文字部分显示代码_html/css_WEB-ITnose

在网页上只有一个小区域，但是说明性的文字又很长，下面这段脚本实现的是长文字的部分显示，有类似需求的朋友可以参考下哈，希望对你有所帮助

在网页上只有一个小区域，但是说明性的文字又很长，下面这段脚本实现的是长文字的部分显示。
当用户点击展开时，文字展开，合起是文字合起。

本来用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();

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

});

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

}