[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=$().text();
                            console.log(height,text);
                            if(height>67){
                                $(this).addClass();
                                $().next().show();
                            }
                        });
                        readMore.unbind(click).click(function(e){
                            let text=$().text();
                            if(text==展开全文this).text(收起全文this).prev().removeClass();
                            }
                            this).prev().addClass(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.imgimage">
                                            </el-avatar>
                                        </el-col>
                                        <el-col :span=21">

                                            <div mainAccountList">
                                                <div title">{{item.name}}</div>
                                                <div mailMainIntro"  v-html=item.text" >
                                                </div>
                                                <div readMore">展开全文</div>
                                                <div turnWeibo" v-if=item.weibo!=null&&item.weibo.length!=0">
                                                    <div ">@{{item.weibo.name}}</div>
                                                    <div " v-html=item.weibo.text"></div>
                                                    <div ">展开全文</div>
                                                </div>
                                                <div mainTime">
                                                    {{item.create_time}} 
                                                    <span v-html=item.source"></span>
                                                </div>
                                                <div bottom">
                                                    <el-button type=primary" v-on:click=copySpecialTopicUrl(item.weibo_url)button">复制URL</el-button>
                                                    <el-button type=copySpecialTopicUrl('http://t.cn/'+item.short_url)">复制短URL</el-button>
                                                    <el-button type=success">推至CMS</el-button>
                                                </div>
                                            </div>
                                        </el-col>
                                        <div clearfix"></div>
                                    </el-card>
                                </el-row>

ajax获取完数据后就执行一下displayAll方法

                getWeiboList: function () {
                    let _this = ;
                    let data={};
                    if(this.weiboSearch != ""){
                        data.word=.weiboSearch;
                    }
                    this.pickTime != ){
                        data.dt=.pickTime;
                    }
                    $.get('index.PHP?r=media/getdata',data,function (rs) {
                        let res= JSON.parse(rs);
                        _this.weiboList=res.result.rows;
                        _this.displayAll();
                    }).then(()=>{
                        .getTodayNums();
                    });
                },

[javascript] 实现展开全文和收起全文效果

猜你在找的JavaScript相关文章