jQuery实现文本展开收缩特效

前端技术 2023/09/09 JavaScript

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

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

<script language=\"javascript\" src=\"jquery.js\"></script>
<script language=\"javascript\">
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();
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>test</title>
<style>
#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;
}
</style>
</head>
<body>
<div id=\"limittext\" >
<div class=\"content\" style=\"padding-bottom:15px;\">
这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字
</div>
<div class=\"switch\">展开</div>
</div>
</body>
</html>

方法二：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>jQuery实现DIV层的收缩展开效果</title>
<script type=\"text/javascript\" src=\"/images/jquery.js\"></script>
<style>
/* 收缩展开效果 */
.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;}
</style>
</head>
<body>
<script type=\"text/javascript\">
// 收缩展开效果
$(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\");
  });
});
</script>
<!-- 收缩展开效果 -->
<div class=\"box\">
<h1>收缩展开效果</h1>
<div class=\"text\">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
</div>
</div>
<br />

<div class=\"box\">
<h1>收缩展开效果</h1>
<div class=\"text\">
    1<br />
    2<br />
</div>
</div>
<br>
<font color=red>第一次运行请刷新一下页面。</font>
</body>
</html>

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

本文地址：https://www.stayed.cn/item/24888

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案