vue折叠面板(左右模块联动)

vue折叠面板通过高度计算进行展开和收齐,给模块添加绝对定位实现联动效果.

先看一下效果

HTML代码

	

		

			

				
吕布
				
关羽
				
张飞
				
赵云
				
马超
				
典韦
				
许褚
				
黄忠
				
颜良
				
文丑
			
			

				
			
		
		

			

				
李元霸
				
宇文成都
				
裴元庆
				
雄阔海
				
伍云召
				
伍天锡
				
罗成
				
杨林
				
魏文通
			
		
	

CSS代码

.flex {
	display: flex;
	justify-content: space-between;
	width: 50%;
	margin: 30px auto;
	padding: 20px;
	box-shadow: 0 0 10px grey;
}
.left {
	width: 70%;
	position: relative;
	background: linear-gradient(to right,#009FFF,#ec2F4B);
	box-shadow: 0 0 10px grey;
	color: white;
}
.right {
	width: 25%;
	height: auto;
	overflow-y: auto;
	position: relative;
	background: linear-gradient(to top,#654ea3,#eaafc8);
	box-shadow: 0 0 10px grey;
	color: white;
}
.rightSon {
	position: absolute;//很关键
}
.leftSon {
	height: 0;
	overflow: hidden;
    transition: all .5s;
}
.foot {
	height: 50px;
	position: relative;
	background: white;
}
img {
	position: absolute;
	bottom: -30%;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
}
p {
	margin-left: 10px;
}

JS代码

大功告成!