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