- 1Intel RealSense D435i:简介、安装与使用(ROS、Python)
- 2两个升序有序Java_【Java面试题】——— 合并两个有序链表（递归法、迭代法）...
- 3Vue3 学习笔记 —— Teleport、keep-alive_invalid teleport target on mount: null
- 4Spring Bean生命周期、Bean实例化过程_spring bean 的实例化过程和生命周期
- 5【python】python爱心代码【附源码】
- 6顺序表oj--移除元素&&删除重复项&&合并两个有序数组_合并数组并删除相同项
- 7数字图像处理Malab/C++（三）傅里叶变换及频谱图、频域滤波_图像处理fft
- 8STM32涉及到的汇编基础知识_stm32汇编
- 9【工具使用】浏览器控制台，network面板上传/下载请求日志文件，方便调试_网页控制台日志下载
- 10工作中使用到的单词（软件开发）_210.40.50.66/student/#/login
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);
}
