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