[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();});},