[javascript] 实现展开全文和收起全文效果
在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容 .
使用jquery比较容易实现 , 最开始我想直接根据vuejs的语法来实现效果 , 结果失败 , 还是jq做起来简单
思路是 , 获取当前文本的div高度 ,超过一定高度就增加一个class值 . 它旁边的点击展开全文默认隐藏 , 超过高度展示 .
展开全文点击后更换文字内容为收起全文
在vuejs中也可以正常使用jquery , 增加一个method
displayAll(){ $(function(){ let obj=$("body").find(".mailMainIntro"); let readMore=$(".readMore"); readMore.hide(); obj.removeClass("mainIntroZhe"); obj.each(function(){ let height=$(this).height(); let text=$(this).text(); console.log(height,text); if(height>67){ $(this).addClass("mainIntroZhe"); $(this).next().show(); } }); readMore.unbind("click").click(function(e){ let text=$(this).text(); if(text=="展开全文"){ $(this).text("收起全文"); $(this).prev().removeClass("mainIntroZhe"); } if(text=="收起全文"){ $(this).text("展开全文"); $(this).prev().addClass("mainIntroZhe"); } return; }); }); }
html部分是这样的
<el-row v-for="(item, index) in weiboList" :key="index" class="mainAccountBox"> <el-card :body-style="{ padding: '10px' }"> <el-col :span="3"> <el-avatar :size="60"> <img :src="item.img" class="image"> </el-avatar> </el-col> <el-col :span="21"> <div class="mainAccountList"> <div class="title">{{item.name}}</div> <div class="mailMainIntro" v-html="item.text" > </div> <div class="readMore">展开全文</div> <div class="turnWeibo" v-if="item.weibo!=null&&item.weibo.length!=0"> <div class="title">@{{item.weibo.name}}</div> <div class="mailMainIntro" v-html="item.weibo.text"></div> <div class="readMore">展开全文</div> </div> <div class="mainTime"> {{item.create_time}} <span v-html="item.source"></span> </div> <div class="bottom"> <el-button type="primary" v-on:click="copySpecialTopicUrl(item.weibo_url)" class="button">复制URL</el-button> <el-button type="primary" v-on:click="copySpecialTopicUrl('http://t.cn/'+item.short_url)" class="button">复制短URL</el-button> <el-button type="success" class="button">推至CMS</el-button> </div> </div> </el-col> <div class="clearfix"></div> </el-card> </el-row>
ajax获取完数据后就执行一下displayAll方法
getWeiboList: function () { let _this = this; let data={}; if(this.weiboSearch != ""){ data.word=this.weiboSearch; } if(this.pickTime != ""){ data.dt=this.pickTime; } $.get('index.php?r=media/getdata',data, function (rs) { let res= JSON.parse(rs); _this.weiboList=res.result.rows; _this.displayAll(); }).then(()=>{ this.getTodayNums(); }); },
十年开发经验程序员,离职全心创业中,历时三年开发出的产品《唯一客服系统》
一款基于Golang+Vue开发的在线客服系统,软件著作权编号:2021SR1462600。一套可私有化部署的网站在线客服系统,编译后的二进制文件可直接使用无需搭开发环境,下载zip解压即可,仅依赖MySQL数据库,是一个开箱即用的全渠道在线客服系统,致力于帮助广大开发者/公司快速部署整合私有化客服功能。
开源地址:唯一客服(开源学习版)
官网地址:唯一客服官网
标签:
javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2019-05-29 [PHP] substr占用内存谨慎使用
2016-05-29 [javaSE] 基本数据类型对象包装类