div点击展开 vue_vue实现展开全部，收起全部

1.给数组的每一项添加是否展开或收起的标志：‘toggleShowDes’和长度限制的标志：‘ifMore’

/*获取评论列表*/

getComment: function(flag){

var m = this;

if (!flag) {

m.conmontShow = false;

}

$.get('/subject/getComment',{id:m.topicItem.questionId,page:1},function(ret){

if (ret.errCode==0){

m.conmontShow = true;

var arr = ret.data.lists;

arr.forEach(function (v, i) {

if ($.inArray(zhentiListVm.userId, v.pointOfPraiseRecord) < 0) {

v.fabulous = false;

} else {

v.fabulous = true;

};

v.toggleShowDes = false;

v.ifMore=false;

});

setTimeout(function () {

$('.intro').each(function (i, v) {

if (arr[i].content.length > 44) {

console.log(123)

arr[i].ifMore=true

} else {

arr[i].ifMore=false;

console.log(456)

}

})

});

zhentiListVm.commentLists = arr;

zhentiListVm.userInfo = ret.data.users;

}else{

console.log(ret)

}

},'json')

},

2.根据内容判断状态

[[ item.content ]]

收起全部

[[ item.content ]]

展开全部

3.点击展开和收起的函数

/*简介展开*/

spread: function (item,index,targetState) {

console.log(index)

var self = this;

if(targetState) {

self.commentLists.forEach(function (v, i) {

console.log(i);

v.toggleShowDes=(i== index);

});

}else{

item.toggleShowDes=false;

}

}

4.css样式

.des1, .des2 {

position: relative;

}

.des1 {

word-break: break-all;

height: .66rem;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

}

.height4{height: .4rem}

.absolut{position: absolute}

/*.mores {

background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);

height: .66rem;

left: 0;

bottom: 0;

}*/

.more-operation-collect{

position: absolute;

height: 0.66rem;

color: #1facfc;

right: 12px;

}

.more-operation {

position: absolute;

height: 0.66rem;

color: #1facfc;

right: 12px;

/*padding-right: 127px;*/

}

.collect{ bottom: 2px;}

.open{ bottom: -12px;}

.more-operation span {

margin-right: 6px;

}

.retract {

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}