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);
}
div点击展开 vue_vue实现展开全部,收起全部相关推荐
- 点击UITableView的cell展开收缩
首先要理解UITableView代理方法调用的先后顺序. 当初始化UITableView后,代理回调顺序如下 1://返回cell个数 - (NSInteger)tableView:(UITableV ...
- android listview item 展开动画,android的ListView点击item使item展开的做法的实现代码
本文介绍了android的ListView点击item使item展开的做法的实现代码,分享给大家,具体如下: 效果图: 原理是点击item的时候,重新measure list的各个item的高度 li ...
- ant-design vue的tree组件点击小三角符号展开,触点太小的问题
直接进入正题,需求目的是加大三角的触点,让点击标题的时候也能触发展开列的效果 树形节点的select事件会接受两个参数,一个是节点id,一个是event; 细心地你会发现,event对象里面有一个no ...
- bootstrap搜索框:click下拉展开改hover展开(两种代码)
bootstrap搜索框:click下拉展开改hover展开(两种代码) 问题: 实现顶部导航的鼠标悬停下拉展开的效果: 实现的滚不导航区域:搜索框组件之点击下拉展开 变更为 鼠标悬停展开下拉选项条件 ...
- layui动态生成的手风琴实现默认第一个展开+鼠标悬浮展开
嘿嘿嘿,我百度了一下,发现没有这个玩意,作为小白白的我自己摸索着成功实现了,今日好开心-耶耶耶! 首先,我是从数据库提取数据,在前端用foreach循环展示,但是,循环出来的都是统一样式,要不都是展开 ...
- ES6新语法--对象成员简写、对象展开、数组展开
对象成员简写 /*** 对象成员简写*///声明变量 let name = 'chen'; let age = 18; let gender = 'man'; let score = 100;//声明 ...
- 每次点击添加css动画,div点击添加css动画
div点击添加css动画 }#big_div{width:100%;height:100%;background-color:#00FF00; }.small_div{width:100%;heigh ...
- VUE实现DIV点击换色
VUE实现点击DIV背景换色 VUE实现DIV点击换色 这个方法初衷是为了代替button做一个更加自由添加图标标题之类的按钮来代替tab页签,所以后续还可以绑定一些自己的事件,如跳转页面,窗口弹出. ...
- tekla相贯线展开CAD相贯线展开弧形管展开弯管展开理想3V
本文介绍:tekla相贯线展开CAD相贯线展开弧形管展开弯管展开技术原理 展开原理:在CAD里获得管子实体相贯线图形信息(端点 中点等),然后到平面展开画图. 要求:cad模型可以直接展开.tekla ...
最新文章
- 在同一个文件中定义多个命名空间
- android碎片调用动态碎片,Android Training - 使用碎片创建一个动态UI
- border-image用法
- Linux shell 脚本中, $@ 和$# 分别是什么意思?
- java guava_多线程(java和guava两种方式):
- C#.Net工作笔记003---异步编程async await_在开发中的使用经验_随时更新
- jemalloc优化MySQL、Nginx内存管理
- python3.9.5安装教程加汉化
- MPQ8873电源芯片配置
- SpringBoot Controller Post接口单元测试
- 初识scratch,球拍,背景,障碍物的制作
- 字符编码-带你走出Unicode与UTF-8的误区
- autoCAD绘制简单三维立体图形
- 新增数学与人工智能学部,考数据结构!齐鲁工业大学(山东省科学院)计算机考研...
- 如何关闭windows杀毒软件
- git 冲突解决一把梭
- Oracle 临时表 (Gobal Temporary Table)
- latex 行内公式和行间公式高亮问题、多行高亮问题
- 小保养多,大保养少 别克英朗保养详解
- bgp基础配置实验(基于环回口建立peer关系)
热门文章
- 大话光存储(1)光存储基本原理
- Mybatis使用IN()查询出现的错误解决记录
- 基于SYSBIOS GIO接口的uart通信DMA模式
- HTML div的使用
- flink 高可用 high-availability 配置的重试次数无效问题
- 共享访问超过10台机报错解决方案
- 研究考虑CSP电站和ORC的综合能源系统优化规划 程序包含新能源消纳、光热电站、ORC有机郎肯循环、
- 配电网多目标动态无功优化 基于IEEE33节点配电网,以配电网网损最小 电压偏差最小以及光伏消纳最大为目标
- 在服务器上部署asp网站,部署asp网站到云服务器
- 莫等闲 - 什么是工作和学习之间的适当平衡?