给文章加入阅读剩下内容(阅读全文)按钮

这个功能本身十分鸡肋,但是为了页面美观还是有必要的。


1、首先给文章div加入css

overflow: hidden;

2、然后加入一段按钮和js代码

<div class="rest-butt-content" id="rest-butt-content" style="display:none;"><div id="rest-butt" onclick="rest_butt();" style="margin: 1rem auto;line-height: 2.3rem;display: block;width: 8rem;border-radius: 5px;border: 1px solid #6f8ec5;text-align: center;cursor: pointer;color: #6f8ec5;">阅读余下内容</div></div>
<script>
if($('.art-content').height()>600){
// 如果内容页高度大于600
$('.art-content').height('600');
$('#rest-butt-content').show();
// 控制内容页的高度到600
// 且按钮为显示状态
}else{
// 否则不出现阅读更多的按钮
$('#rest-butt-content').hide();
}
function rest_butt(){
$('.art-content').height('100%');
$("#rest-butt-content").remove();
}
</script>

上面的代码加到文章内容结束的后面即可,切勿在一个div内。(具体使用到的class请自己按照自己的class/id修改)以上操作完成之后就可以实现阅读更多内容的按钮



本文标签:

版权声明:给文章加入阅读剩下内容(阅读全文)按钮》该篇文章出自【岳泽以博客】,如果您有任何复制、转载行为请注明原文地址!

返回列表
上一篇:
下一篇:

发表评论

快捷回复:

评论列表 (已有6条评论)
美女佳人侯爵2020-03-24 17:40回复
我相信自己,相信未来,相信清晨没有地平线。
美女佳人侯爵2020-03-24 17:38回复
地球不是一个规则的圆形,而像是一个椭圆形。
人鬼情未了侯爵2020-03-23 08:58回复
根据爆发期望,很顽皮的狗将会在季中的卡路里中发行最后一个目录而且没有现在显示发行日期
人鬼情未了侯爵2020-03-23 08:57回复
事物,通过这种自由的手段以及玩家们开动脑筋想出的对抗敌人的办法来达到游戏所要求的目标
人鬼未了情路人2020-03-23 08:55回复
己方血量有点危险的时候还可以用桃花妖的桃之馨息给己方牌手回复5点血量,
美容医院路人2018-07-22 16:37回复
感觉还好,并不鸡肋