前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 展开全文和收起全文

JavaScript 展开全文和收起全文

作者头像
Nian糕
修改2024-03-16 16:09:46
1.8K0
修改2024-03-16 16:09:46
Unsplash
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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.04.04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档