微信小程序点击展开收起多层嵌套

html页面：

    
        
            {{parentItem.listName}}qq
            
        
        
            
                
                    {{item.itemName}}
                    
                
                
                    
                        内容：
                        {{item.content}}
                    
                    
                        时间：
                        {{item.time}}
                    
                
            
        
    

JS页面：

// pages/dome/dome.js
Page({
/**
* 页面的初始数据
*/
data: {
    list:[
    {listName:'列表1',
    item:[{
    itemName:'子列表1-1',
    content:'1-1中的内容',
    time: '2015-05-06'
    }, {
    itemName: '子列表1-2',
    content: '1-2中的内容',
    time: '2015-04-13'
    }, {
    itemName: '子列表1-3',
    content: '1-3中的内容',
    time: '2015-12-06'
    }]
    },
    {
    listName: '列表2',
    item: [{
    itemName: '子列表2-1',
    content: '2-1中的内容',
    time: '2017-05-06'
    }, {
    itemName: '子列表2-2',
    content: '2-2中的内容',
    time: '2015-08-06'
    }, {
    itemName: '子列表2-3',
    content: '2-3中的内容',
    time: '2015-11-06'
    }]
    }, {
    listName: '列表3',
    item: [{
    itemName: '子列表3-1',
    content: '3-1中的内容',
    time: '2015-05-15'
    }, {
    itemName: '子列表3-2',
    content: '3-2中的内容',
    time: '2015-05-24'
    }, {
    itemName: '子列表1-3',
    content: '3-3中的内容',
    time: '2015-05-30'
    }]
    }
    ]
    },
    //点击最外层列表展开收起
    listTap(e){
        console.log('触发了最外层');
        console.log(e);
        let Index = e.currentTarget.dataset.parentindex,//获取点击的下标值
        list=this.data.list;
        console.log(list);
        list[Index].show = !list[Index].show || false;//变换其打开、关闭的状态
        if (list[Index].show){
            //如果点击后是展开状态，则让其他已经展开的列表变为收起状态
            this.packUp(list,Index);
        }
        this.setData({
            list    
        });
    },
    //点击里面的子列表展开收起
    listItemTap(e){
        let parentindex = e.currentTarget.dataset.parentindex,//点击的内层所在的最外层列表下标
        Index=e.currentTarget.dataset.index,//点击的内层下标
        list=this.data.list;
        console.log(list[parentindex].item,Index);
        list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//变换其打开、关闭的状态
        if (list[parentindex].item[Index].show){
            //如果是操作的打开状态，那么就让同级的其他列表变为关闭状态，保持始终只有一个打开
            for (let i = 0, len = list[parentindex].item.length;i

wxss页面：

page {
    background: #f3f7f7;
}

.list_name_box {
    background: #fff;
    border-bottom: 1px solid #efefef;
    display: flex;
    height: 90rpx;
    align-items: center;
    padding: 0 25rpx;
    font-size: 32rpx;
}

.list_item_name {
    flex: 1;
}

.icon_down {
    width: 35rpx;
    height: 35rpx;
    transition: transform 0.3s;
}

/* .list_item_box{
    height: 0;
    transition:height  0.3s;
    overflow: hidden;
    }
    .list_item_box_show{
    height: 500rpx;
    } */
.list_item_name_box {
    background: #fff;
    font-size: 30rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    padding: 0 25rpx 0 50rpx;
}

.other {
    display: flex;
    height: 80rpx;
    padding: 0 25rpx 0 50rpx;
    align-items: center;
    font-size: 30rpx;
    color: #666;
}

.icon_down_rotate {
    transform: rotate(180deg);
}