uniapp 三级折叠列表(展开/收起)

1.view部分

<template>
	<view class="content">

		<view class="position-group">

			<!-- 一级循环 -->
			<view class="pronames_one" v-for="(item,index) in positionlist" :key="index" :class="item.oneliststare?'oneshow':'onehide'">
				<view class="pronames-one-label" @click="onelist(index)"><text>{{item.onename}}</text><label :class="item.oneliststare?'cuIcon-fold':'cuIcon-unfold'"></label></view>
				<!-- 二级循环 -->
				<view class="pronames_two" v-for="(item2,index2) in item.positiontwo" :key="index2" :class="item2.twoliststare?'twoshow':'twohide'">
					<view class="pronames-two-label" @click="twolist(index,index2)"><text>{{item2.twoname}}</text><label :class="item2.twoliststare?'cuIcon-fold':'cuIcon-unfold'"></label></view>
					<view class="pronames_three">
						<!-- 三级循环 -->
						<view class="pronames_three-label" v-for="(item3,index3) in item2.positionthree" :key="index3" @click="threelist"><label
							 :class="positionSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label><text>{{item3.trheename}}</text></view>
					</view>
				</view>
			</view>

		</view> 

	</view>
</template>

2.js部分

	export default {
		data() {
			return {

				positionSele: true,
				positionlist: [{
					id: 0,
					onename: "销售|客服|市场",
					oneliststare: false,
					positiontwo: [{
						twoid: 0,
						twoname: "销售业务",
						twoliststare: false,
						positionthree: [{
							trheeid: 0,
							trheename: "销售代表",
							twoselestare: false
						},{
							trheeid: 0,
							trheename: "客户代表",
							twoselestare: false
						},{
							trheeid: 0,
							trheename: "销售顾问",
							twoselestare: false
						}
						]
					},{
						twoid: 1,
						twoname: "销售管理",
						twoliststare: false,
						positionthree: [{
							trheeid: 0,
							trheename: "销售主管",
							twoselestare: false
						},{
							trheeid: 0,
							trheename: "销售经理",
							twoselestare: false
						},{
							trheeid: 0,
							trheename: "销售总监",
							twoselestare: false
						}
						]
					}]
				},{
					id: 1,
					onename: "IT|互联网|通信",
					oneliststare: false,
					positiontwo: [{
						twoid: 0,
						twoname: "软件/互联网开发/系统集成",
						twoliststare: false,
						positionthree: [{
							trheeid: 0,
							trheename: "软件工程师",
							twoselestare: false
						},{
							trheeid: 1,
							trheename: "软件研发工程师",
							twoselestare: false
						},{
							trheeid: 2,
							trheename: "高级软件工程师",
							twoselestare: false
						}
						]
					},{
						twoid: 1,
						twoname: "互联网产品/运营管理",
						twoliststare: false,
						positionthree: [{
							trheeid: 0,
							trheename: "网店客服",
							twoselestare: false
						},{
							trheeid: 1,
							trheename: "网店运营",
							twoselestare: false
						},{
							trheeid: 2,
							trheename: "网店管理员",
							twoselestare: false
						}
						]
					}]
				}]

			}
		},
		onLoad() {},
		methods: {
			
			onelist(index){
				let positionlist = this.positionlist;
				// 展开收起一级列表 start
				if(positionlist[index]['oneliststare'] == false){
					positionlist[index]['oneliststare'] = true;
				}else{
					positionlist[index]['oneliststare'] = false;
				}
				// 展开收起一级列表 end
			},
			
			twolist(index,index2){
				
				let positionlist = this.positionlist;
				let positiontwo = this.positionlist[index].positiontwo[index2]['twoliststare'];
				
				console.log(positiontwo)

				
				// 展开收起二级列表 start
				
				if(positiontwo == false){
					this.positionlist[index].positiontwo[index2]['twoliststare'] = true;
				}else{
					this.positionlist[index].positiontwo[index2]['twoliststare'] = false;
				}
				// 展开收起二级列表 end				
				
			}
			
		}
	}

3.css部分

	page {
		background: #fff;
	}

	.position-group {
		width: 100%;
		height: auto;
	}


	/* 一级 */
	.pronames_one {
		width: 100%;
		height: auto;
	}

	.pronames-one-label {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		background: #fff;
		box-sizing: border-box;
		padding: 0px 3%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eaeaea solid;
	}

	.pronames-one-label text {
		font-size: 15px;
		color: #2ebbfe;
	}
	
	.pronames-one-label label{
		color: #aaa;
		font-size: 20px;
		transition: all 0.5s;
		
	}

	


	/* 二级 */
	.pronames_two {
		width: 100%;
		height: auto;
		transition: all 0.5s;
	}

	.pronames-two-label {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 3%;
		border-bottom: 1px #eee solid;
	}

	.pronames-two-label text {
		font-size: 15px;
		color: #333;
	}

	.pronames-two-label label{
		color: #aaa;
		font-size: 20px;
		transition: all 0.5s;		
		
	}



	/* 三级 */
	.pronames_three {
		width: 100%;
		height: auto;
	}

	.pronames_three-label {
		width: 97%;
		margin-left: 3%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		flex-direction: row;
		border-bottom: 1px #f1f1f1 solid;
		align-items: center;
	}

	.pronames_three-label label {
		width: 10%;
		height: 90rpx;
		line-height: 90rpx;
		display: block;
		color: #D5D5D5;
		font-size: 20px;
	}

	.pronames_three-label text {
		width: 90%;
		font-size: 15px;
		color: #868686;
	}
	
	
	/* 展开收起效果 start */
	
	.oneshow{}
	.oneshow .pronames_two{ display: block; }
	.onehide{} 
	.onehide .pronames_two{ display: none; }
	
	/* 展开收起效果 end */	
	
	
	.twoshow{}
	.twoshow .pronames_three{ display: block; }
	.twohide{} 
	.twohide .pronames_three{ display: none; }