Unsplash我们在浏览文章列表页的时候，往往只会看到一部分的摘要，在摘要下面会有一个展开全文的按钮，点开后就能看到完整内容，而原来的展开全文按钮此时变成了收齐全文的按钮，同样的，点击该按钮之后，又会回到之前显示部分摘要的状态
代码语言：javascript复制<div class="simple_text">
<p>别堆砌怀念让剧情 变得狗血 深爱了多年又何必 毁了经典 都已成年不拖不欠 浪费时间是我情愿 像谢幕的演员 眼看着灯光熄灭 来不及 再轰轰烈烈 就保留 告别的尊严 我爱你不后悔 也尊重故事结尾 分手应该体面 谁都不要说抱歉 何来亏欠 我敢给就敢心碎 镜头前面是从前的我们 在喝彩 流着泪声嘶力竭 离开也很体面 才没辜负这些年 爱得热烈 认真付出的画面 别让执念 毁掉了昨天 我爱过你 利落干脆</p>
<a href="javascript:void(0);" class="show_btn" onclick="showdiv(this);">展开全文</a>
</div>
<div class="full_text" style="display:none;">
<p>别堆砌怀念让剧情 变得狗血 深爱了多年又何必 毁了经典 都已成年不拖不欠 浪费时间是我情愿 像谢幕的演员 眼看着灯光熄灭 来不及 再轰轰烈烈 就保留 告别的尊严 我爱你不后悔 也尊重故事结尾 分手应该体面 谁都不要说抱歉 何来亏欠 我敢给就敢心碎 镜头前面是从前的我们 在喝彩 流着泪声嘶力竭 离开也很体面 才没辜负这些年 爱得热烈 认真付出的画面 别让执念 毁掉了昨天 我爱过你 利落干脆</p>
<a href="javascript:void(0);" class="hidden_btn" onclick="hidediv(this);">收起全文</a>
</div>摘要和全文的内容是一样的，一般我们请求得到的数据不会分为摘要和全文两个部分，所以需要我们在前端进行处理，把全文的一部分作为摘要进行显示，在这里可以通过 CSS 进行显示的行数的控制
代码语言：javascript复制.simple_text p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}给按钮绑定 showdiv 函数和 hidediv 函数
代码语言：javascript复制// 展开全文
function showdiv(obj) {
var x = obj.parentNode;
var y = x.nextSibling;
if(y.nodeType != 1){
y = y.nextSibling;
}
y.style.display = "block";
x.style.display = "none";
}
// 收起全文
function hidediv(obj) {
var y = obj.parentNode;
var x = y.previousSibling;
if(x.nodeType != 1){
x = x.previousSibling;
}
y.style.display = "none";
x.style.display = "block";
}
运行结果但一个页面显示的文章会有很多，而有些文章的文字很少，不需要展示全文的按钮，所以我们还需要进行文章字数的判断，是否需要显示按钮
代码语言：javascript复制$.each($(".simple_text p"), function(i, o){
if($('.simple_text p').eq(i).height() >= 50){
$('.simple_text p').eq(i).next().css('display','block');
}else {
$('.simple_text p').eq(i).next().css('display','none');
}
});
运行结果本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Showdiv_and_hidediv 上了，有需要的同学可自行下载，预览效果可点击 effect
