JavaScript 展开全文和收起全文

Unsplash

我们在浏览文章列表页的时候,往往只会看到一部分的摘要,在摘要下面会有一个展开全文的按钮,点开后就能看到完整内容,而原来的展开全文按钮此时变成了收齐全文的按钮,同样的,点击该按钮之后,又会回到之前显示部分摘要的状态

<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 进行显示的行数的控制

.simple_text p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

给按钮绑定 showdiv 函数和 hidediv 函数

// 展开全文
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";
}

运行结果

但一个页面显示的文章会有很多,而有些文章的文字很少,不需要展示全文的按钮,所以我们还需要进行文章字数的判断,是否需要显示按钮

$.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

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Crossin的编程教室

我在Python的艳阳里,大雪纷飞

你在南方的艳阳里大雪纷飞;我在北方的寒夜里四季如春。 昨天,南方不少地区,尤其是长江中下游一带迎来了一场难得的大雪。虽说给出行带来极大的不便,但也让我们这些没怎...

299110
来自专栏点滴积累

JS前端三维地球渲染——中国各城市航空路线展示

前言 我还从来没有写过有关纯JS的文章(上次的矢量瓦片展示除外,相对较简单。),自己也学习过JS、CSS等前端知识,了解JQuery、React等框架,但是自己...

91860
来自专栏数据小魔方

这么牛X的包,一般人我不告诉他!!!

本文将给大家介绍一个ggplot2灰常牛X的可视化扩展包,我将该包主页的包用法介绍整理成中文,分享给大家。 包名叫geofacet,有经验的charter大概...

35350
来自专栏牛客网

字节跳动Android校招面试

Handler、MessageQueue等一套东西讲一下,详细说了下源码。为什么主线程loop不会ANR?ThreadLocal原理。

30920
来自专栏Python与爬虫

[资源分享]计算机科学速成课

推荐 程序员的你一定要看,不是程序员的也可以看看,我已经安利刚中考完的我妹妹看了(培养程序媛...)

26130
来自专栏Debian社区

FFmpeg 3.4 发布,多媒体处理工具合集

FFmpeg 3.4 已发布。FFmpeg 是用于处理音频、视频、字幕和相关元数据的多媒体内容的库和工具的合集。

17930
来自专栏Golang语言社区

(重载)厚土Go学习笔记 | 02. 打印当前时间time.Now()时不我待

菅俊菠,70后IT人,程序员到产品经理/项目经理,先后涉猎教育、企管、煤矿、电商等多个领域的系统开发和团队管理工作。擅长业务分析、团队管理,关注前沿技术,目前注...

11540
来自专栏程序员的诗和远方

20180914_ARTS_week12

因为之前做过 Integer to Roman 这个 Roman to Integer 还是比较容易有思路,和 Integer to Roman 差不多,但是这...

8910
来自专栏社区的朋友们

【小程序码设计篇】菊花绽放

2017 年四月,微信正式推出了小程序码。小程序码设计深度解析,为何长得像菊花,进行二次美化应该注意什么,本文为你揭晓!

5.9K10
来自专栏opengps

新手入门百度地图开发的(0,0)坐标问题

        对于大部分人来讲,由于百度地图资料众多,过度依赖搜索引擎等等原因。新接触百度地图开发工作其实并不容易。今天说说关于坐标(0,0)的问题。 ...

38890

扫码关注云+社区

领取腾讯云代金券