一段文字的更多、收起效果
作者：互联网
今天做页面的时候需要做一个更多、收起的效果，我也是个新手啊，不会啊，慌的一批啊，怎么办？？这时候我想到一句话，男人不能说自己不行，我就说给我10分钟。然后我去百度，希望可以找个插件用用，然后发现代码量太大，我这个人比较懒，能少写一行代码，绝不多写一行。然后我开始自己写，先看了一下他们写的逻辑，最后成功完成任务。分享上来，供大家使用，注释、逻辑什么的我都写好了，有什么不懂的地方大家可以直接评论。或者发现可以用更少的代码写出来的，也希望大家可以评论出来，不要抠抠搜搜的。废话不多说，上源码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
a {
text-decoration: none;
color: #333;
}
.box {
color: #FD6262;
}
</style>
<body>
<div class="box">
<p>
<span class="zishu">测试测试测试测试</span>
<a href="javascript:;" class="gengduo" data-fld="1">更多>></a>
</p>
</div>
<script type="text/javascript">
$(function() {
//获取span里的文字
var bb = $('.zishu').text()
// aa代表的是span里的文字的字数
var aa = bb.length
// 获取p标签里的文本
var cc = $('.box p').text()
// 控制台打印出span里的字数的个数
console.log(aa)
// 给字数做判断
// 逻辑：1、如果字数大于5个,那么span里只显示5个字+省略号，更多显示；
// 2、否则显示的是原文文字个数，收起显示
if (aa > 5) {
$('.zishu').text(cc.substring(0, 10) + "...")
$('.gengduo').show()
} else {
$('.zishu').text(bb)
$('.gengduo').hide()
}
// 更多和收起的点击事件
// 逻辑：1、因为不知道用户要点击几次更多和收起，所以直接给点击事件套个循环，随便他点几次
// 2、给a标签一个data值，通过data值来判断显示更多还是收起
// 3、给a标签一个点击事件
for (var i = 0; i < bb.length; i++) {
$('.gengduo').eq(i).click(function() {
if ($(this).data('fld') == '1') {
$('.zishu').text(bb)
$('.gengduo').data('fld', '0').text('收起>>')
} else {
$('.zishu').text(cc.substring(0, 10) + "...")
$('.gengduo').data('fld', '1').text('更多>>')
}
})
}
})
</script>
</body>
</html>
大家可以直接复制、粘贴到html文件中看下效果。
注：本文系原创文章，转载请注明出处
标签：文字,bb,text,收起,gengduo,一段,data,zishu 来源： https://www.cnblogs.com/qsniubi/p/13050709.html