折叠面板/手风琴demo

css3 + vue 实现折叠面板/手风琴效果demo

所有效果，样式，数据 均可根据自己需要调整（图片地址改一下就好）

废话不多说，直接上代码

<template>
	<view class="container">
		<view class="item" v-for="(item,index) in list" :key='index' @click="open(index)">
			<view class="flex_js pt_30 fw pl_30">
				<view class="fs0 flex" @click.stop="select(index)">
					<image :src="select_index.indexOf(index) != -1 ? '../../../static/auth/complete_icon.png':'../../../static/auth/uncomplete_icon.png'" style="width: 22rpx;height: 22rpx;margin-right: 30rpx;" mode=""></image>
					<view :class="select_index.indexOf(index) != -1 ? 'select' :''">{{item.name}}</view>
				</view>
				<image src="../../../static/auth/left_icon.png" ref='img' :data-index='index' :class="open_index == index && item.open ? 'img1' : open_index != index && item.open ? 'img2' :''" style="width: 10rpx;height: 16rpx;" mode=""></image>
			</view>
			<view class="chlid pl_30"  style="background: #FCFCFC">
				<view ref='item' :data-index='index' :class="open_index == index && item.open ? 'height1' : open_index != index && item.open ? 'height2' :''"
				 v-for="(item1,index1) in item.chlid" :key='index1' style="font-size: 22rpx;color: #2F2F2F;height: 0rpx;overflow: hidden;line-height: 68rpx;"> - {{item1}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '12312312',
					open:false,
					chlid: ['asdasdasd','1231qweqweq','adlkjsiankld']
				},{
					name: '12312312',
					open:false,
					chlid: ['为人情味请问','12俄官方表示对此']
				}],
				select_index:[],
				open_index:'',
			}
		},
		onLoad() {

		},
		methods: {
			open(e){
				console.log(e)
				var that = this
				
				this.open_index = e
				for(let i in this.list){
					if(i == e){
						if(this.list[i].open){
							for(let ii of this.$refs.item){
								if(ii.$el.dataset.index == e){
									ii.$el.className = 'height2'//添加class前 该元素必须没有class定义的样式  可以写内联
									setTimeout(()=>{
										that.list[i].open = false
									},300)
								}
							}
							for(let ii of this.$refs.img){
								if(ii.$el.dataset.index == e){
									ii.$el.className = 'img2'
									setTimeout(()=>{
										that.list[i].open = false
									},300)
								}
							}
						}else{
							this.list[i].open = true
						}
					}else{
						if(this.list[i].open){
							setTimeout(()=>{
								that.list[i].open = false
							},300)
						}
					}
				}
			},
			select(e){
				console.log(e)
				if(this.select_index.indexOf(e) == -1){
					this.select_index.push(e)
				}else{
					this.select_index.splice(this.select_index.indexOf(e),1)
				}
			},
		}
	}
</script>

<style scoped>
	.container{
		padding: 30rpx;
	}
	.item{
		border: 1rpx solid #EFEFEF;
		margin-bottom: 20rpx;
	}
	.select{
		color: #18B566;
	}
	.img1{
		animation:rotate1 0.3s linear 0s 1;
		-webkit-animation:rotate1 0.3s linear 0s 1;
		-webkit-animation-fill-mode:forwards;
	}
	@keyframes rotate1{
		0%{-webkit-transform:rotate(0deg);}
	    100%{-webkit-transform:rotate(90deg);}
	}
	.img2{
		animation:rotate2 0.3s linear 0s 1;
		-webkit-animation:rotate2 0.3s linear 0s 1;
		-webkit-animation-fill-mode:forwards;
	}
	@keyframes rotate2{
		0%{-webkit-transform:rotate(90deg);}
	    100%{-webkit-transform:rotate(0deg);}
	}
	.height1{
		border-top: 1rpx solid #ECECEC;
		animation:height1 0.3s linear 0s 1;
		-webkit-animation:height1 0.3s linear 0s 1;
		-webkit-animation-fill-mode:forwards;
	}
	@keyframes height1{
		0%{height:0rpx;}
	    100%{height:68rpx;}
	}
	.height2{
		border-top: 1rpx solid #ECECEC;
		animation:height2 0.3s linear 0s 1;
		-webkit-animation:height2 0.3s linear 0s 1;
		-webkit-animation-fill-mode:forwards;
	}
	@keyframes height2{
		0%{height:68rpx;}
		100%{height:0rpx;}
	}
</style>