微信小程序怎么实现内容的展开和收起？

微信公开课小程序热门讨论「微信小程序怎么实现内容的展开和收起？」最新回复-微信小程序开发问题建议找专业的技术解决。小程序可以使用一键生成工具，不需要懂代码的。
看到一个需求，对一些前端小白或者刚开始写小程序的人来说，可能会有点帮助，效果如下：就是以上效果，废话不多说，上代码wxml:viewclass=list_boxwx:for={{list}}wx:key=thiswx:for-item=parentItemwx:for-index=parentIndexviewclass=listviewclass=list_name_boxcatchtap=listTapdata-parentindex={{parentIndex}}textclass=list_item_name{{parentItem.listName}}/textimagesrc=/img/down.pngclass=icon_down{{parentItem.show&&icon_down_rotate}}/image/viewviewclass=list_item_boxwx:if={{parentItem.show}}viewclass=list_itemwx:for={{parentItem.item}}wx:key=thiscatchtap=listItemTapdata-index={{index}}data-parentindex={{parentIndex}}viewclass=list_item_name_boxtextclass=list_item_name{{item.itemName}}/textimagesrc=/img/down.pngclass=icon_down{{item.show&&icon_down_rotate}}/image/viewviewclass=other_boxwx:if={{item.show}}viewclass=othertextclass=other_title内容：/texttextclass=other_text{{item.content}}/text/viewviewclass=othertextclass=other_title时间：/texttextclass=other_text{{item.time}}/text/view/view/view/view/view/view然后wxss:page{background:#f3f7f7;}.list_name_box{background:#fff;border-bottom:1pxsolid#efefef;display:flex;height:90rpx;align-items:center;padding:025rpx;font-size:32rpx;}.list_item_name{flex:1;}.icon_down{width:35rpx;height:35rpx;transition:transform0.3s;}/*.list_item_box{height:0;transition:height0.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:025rpx050rpx;}.other{display:flex;height:80rpx;padding:025rpx050rpx;align-items:center;font-size:30rpx;color:#666;}.icon_down_rotate{transform:rotate(180deg);}JS://pages/dome/dome.jsPage({/***页面的初始数据*/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(触发了最外层);letIndex=e.currentTarget.dataset.parentindex,//获取点击的下标值list=this.data.list;list[Index].show=!list[Index].show||false;//变换其打开、关闭的状态if(list[Index].show){//如果点击后是展开状态，则让其他已经展开的列表变为收起状态this.packUp(list,Index);}this.setData({list });},//点击里面的子列表展开收起listItemTap(e){letparentindex=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(leti=0,len=list[parentindex].item.length;ilen;i++){if(i!=Index){list[parentindex].item[i].show=false;}}}this.setData({list});},//让所有的展开项，都变为收起packUp(data,index){for(leti=0,len=data.length;ilen;i++){//其他最外层列表变为关闭状态if(index!=i){data[i].show=false;for(letj=0;jdata[i].item.length;j++){//其他所有内层也为关闭状态data[i].item[j].show=false;}}}},onLoad:function(options){},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})作者：链接：https://www.imooc.com/article/30662来源：慕课网本文原创发布于慕课网，转载请注明出处，谢谢合作本回答被提问者采纳 更多有关「微信小程序怎么实现内容的展开和收起？」的疑问请扫码关注微信公开课+小程序！