小程序实现折叠菜单效果的示例代码

小编给大家分享一下小程序实现折叠菜单效果的示例代码，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

通常，菜单都有一级菜单二级、三级菜单之分，我们知道前端js的dom操作可以很好的控制二级菜单的显示与隐藏，当然今天我就不介绍web端的菜单折叠效果。我今天呢，是来学习学习小程序中该如何实现点击一级菜单显示/隐藏二级菜单，并且在点击一个菜单显示之外，要实现其他菜单隐藏。

实现效果如下：

代码如下：

.wxml文件

<view class="cells">     <view class="item"  wx:for="{{List}}" wx:for-index="idx" wx:for-item="item" wx:key="idx">         <view bindtap="isOpen" class="cdn" data-index="{{item.id}}">             <view>                 <image class="img" src="{{item.iamges}}" mode="aspectFill"/><text class="content">{{item.cont}}</text>             </view>             <view>                 <text class="discount">{{item.discount}}</text><image class="icon_img" src="{{item.hidden ? '/assets/icon_down2x.png' : '/assets/icon_up2x.png'}}" mode="aspectFill"/>             </view>         </view>         <view hidden="{{item.hiddena}}"  class="hidden">             <block wx:for="{{item.invalidActivty}}"  wx:for-index="index" wx:for-item="items" wx:key="index">                 <view class="buys">                     <view class="v1 ">                         <navigator><text class="new-price">{{items.price}}</text><text class="oldPrice">{{items.oldPrice}}</text></navigator>                         <navigator><text class="buy">{{items.validType}}</text><text style="font-size: 24rpx;margin-left: 20rpx;color: #6C6C6C">{{items.validTime}}</text></navigator>                     </view>                     <view  class="shopping">                         <text>购买</text>                     </view>                 </view>             </block>         </view>     </view> </view>

.wxss文件如下：

page{     background: #fff; } .swiper-img{     width: 750rpx;     height: 300rpx; } .cells .item .cdn{     position: relative;     box-sizing:border-box;     display: flex;     justify-content: space-between;     align-items: center;     padding: 20rpx 30rpx;     /*border-bottom: 1rpx solid #f0f0f0;*/     background-color: #fff;     font-size: 32rpx; } .cells .item .cdn::after{     content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border-bottom:0 solid #f0f0f0;border-width:1px } .img{     height: 44rpx;     width: 44rpx;     vertical-align: middle;     display: inline-block;     line-height: 82rpx; } .icon_img{     height:12rpx;     width:20rpx; } .content{     margin-left: 15rpx;     line-height: 82rpx;     vertical-align: middle; } .discount{     line-height: 82rpx;     vertical-align: middle;     color:orange;     box-sizing: border-box;     padding-right: 20rpx; } .video-item{     display: flex;     flex-direction: column; } .buys{     width:750rpx;     height: 141.6rpx;     position: relative;     box-sizing: border-box;     padding: 20rpx 30rpx;     display: flex;     flex-direction: row;     justify-content: space-between;     align-items: center;     background-color:#FAFAFA; } .buys::after {     content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;     border-bottom:0 solid #DCDCDC;border-width:1px; } .v1{     width: 35%;     display: flex;     flex-direction: row;     flex-wrap: wrap; } .new-price{     font-size: 32rpx;     color: #3B3B3B; } .oldPrice{     text-decoration:line-through;     font-size: 24rpx;     color: #B0B0B0;     margin-left: 20rpx; } .buy{     font-size: 24rpx;     color: #2DAF73;     text-align: center;     width: 80rpx;     height: 40rpx;     line-height: 40rpx;     display: inline-block;     position: relative;     box-sizing: border-box; } .buy::after{     content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #2DAF73;border-width:1px;border-radius:8rpx } .shopping{     width: 128rpx;     height: 56rpx;     line-height: 56rpx;     position: relative;     box-sizing: border-box;     font-size: 28rpx;     color: #2DAF73;     text-align: center; } .shopping::after{     content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #2DAF73;border-width:1px;border-radius:16rpx }

.js文件

data: {     memberList:[         {iamges:"/assets/logo_aiqiyi2x.png",           cont:"爱奇艺影视会员",           discount:"7.5折",           hiddena:true,           id:"0",           invalidActivty:[             {               price:"2.98元",               oldPrice:"3元",               validType:"周卡",               validTime:'7天有效'             },             {                 price:"18.98元",                 oldPrice:"25元",                 validType:"月卡",                 validTime:'30天有效'             },           ]         },         {iamges:"/assets/logo_tengxun2x.png",             cont:"腾讯视频会员",             discount:"7折",             hiddena:true,             id:"1",             invalidActivty:[                 {                     price:"2.98元",                     oldPrice:"3元",                     validType:"周卡",                     validTime:'7天有效'                 },                 {                     price:"18.98元",                     oldPrice:"25元",                     validType:"月卡",                     validTime:'30天有效'                 },             ]         },         {iamges:"/assets/logo_youku2x.png",             cont:"优酷视频黄金会员",             discount:"8折",             hiddena:true,             id:"2",             invalidActivty:[                 {                     price:"2.98元",                     oldPrice:"3元",                     validType:"周卡",                     validTime:'7天有效'                 },                 {                     price:"18.98元",                     oldPrice:"25元",                     validType:"月卡",                     validTime:'30天有效'                 },             ]         },         {iamges:"/assets/logo_sohu2x.png",             cont:"搜狐视频黄金会员",             discount:"8折",             hiddena:true,             id:"3",             invalidActivty:[                 {                     price:"2.98元",                     oldPrice:"3元",                     validType:"周卡",                     validTime:'7天有效'                 },                 {                     price:"18.98元",                     oldPrice:"25元",                     validType:"月卡",                     validTime:'30天有效'                 },             ]         },     ]   },   isOpen:function(e){       var that = this;       var idx = e.currentTarget.dataset.index;       console.log(idx);       var memberList = that.data.MemberList;       console.log(memberList);       for (let i=0; i < memberList.length; i++){           if (idx == i) {               memberList[i].hidden=!memberList[i].hidden;           } else {              memberList[i].hidden=true;           }       }       this.setData({MemberList:memberList});       return true;     },

看完了这篇文章，相信你对“小程序实现折叠菜单效果的示例代码”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！