[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();
                    });
                },
复制代码

 

posted @   唯一客服系统开发笔记  阅读(4640)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2019-05-29 [PHP] substr占用内存谨慎使用
2016-05-29 [javaSE] 基本数据类型对象包装类
点击右上角即可分享
微信分享提示
1
chat with us