小程序简单实现折叠菜单

最近在学习小程序，入手项目中有个使用折叠菜单功能，google下了思路。

关于文章https://blog.csdn.net/qq_35770969/article/details/81477145
中也实现了一样的功能但是此方法是针对数据属性来hidden的，但是不能添加css动效

我依照文案中的数据 也实现了类似功能，但是我用的class方式来 显示隐藏，可以在css中添加自己想要的动效。

image.png

直接贴代码

WXML

<view>
  <block wx:for="{{memberList}}" wx:key="index">
    <view class='cont' bindtap='clickitem' data-index="{{index}}">
      <text>{{item.cont}}</text>
    </view>

    <view class="{{clickId == index ? 'block':'none'}}">
      <block wx:for="{{item.invalidActivty}}" wx:key="index">
        <view class="price" bindtap="clickSubItem" data-text="{{item.price}}">
          <text>{{item.price}}</text>
        </view>
      </block>
    </view>
  </block>
</view>

WXSS

.cont{
  height: 44px;
  width: 100%;
  border-bottom: 1rpx solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
}

.price{
  padding-left: 40px;
  font-size: 28rpx;
  height: 35px;
  background: #ccc;
  border-bottom: 1rpx solid #ccc;
}

.none{
    display: none;
}

.block{
    display: block
}

JS

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    memberList: [{
        iamges: "/assets/logo_aiqiyi2x.png",
        cont: "爱奇艺影视会员",
        discount: "7.5折",
        hiddena: true,
        id: "0",
        invalidActivty: [{
            price: "2.98元11111",
            oldPrice: "3元",
            validType: "周卡",
            validTime: '7天有效'
          },
          {
            price: "18.98元1111",
            oldPrice: "25元",
            validType: "月卡",
            validTime: '30天有效'
          },
        ]
      },
      {
        iamges: "/assets/logo_tengxun2x.png",
        cont: "腾讯视频会员",
        discount: "7折",
        hiddena: true,
        id: "1",
        invalidActivty: [{
            price: "2.98元22222",
            oldPrice: "3元",
            validType: "周卡",
            validTime: '7天有效'
          },
          {
            price: "18.98元22222",
            oldPrice: "25元",
            validType: "月卡",
            validTime: '30天有效'
          },
        ]
      },
      {
        iamges: "/assets/logo_youku2x.png",
        cont: "优酷视频黄金会员",
        discount: "8折",
        hiddena: true,
        id: "2",
        invalidActivty: [{
            price: "2.98元33333",
            oldPrice: "3元",
            validType: "周卡",
            validTime: '7天有效'
          },
          {
            price: "18.98元33333",
            oldPrice: "25元",
            validType: "月卡",
            validTime: '30天有效'
          },
        ]
      },
      {
        iamges: "/assets/logo_sohu2x.png",
        cont: "搜狐视频黄金会员",
        discount: "8折",
        hiddena: true,
        id: "3",
        invalidActivty: [{
            price: "2.98元44444",
            oldPrice: "3元",
            validType: "周卡",
            validTime: '7天有效'
          },
          {
            price: "18.98元44444",
            oldPrice: "25元",
            validType: "月卡",
            validTime: '30天有效'
          },
        ]
      },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },
  clickitem(e) {
    const idx = e.currentTarget.dataset.index
    if(idx == this.data.clickId){
      this.setData({
        clickId: -1
      })
    }else{
      this.setData({
        clickId: idx
      })
    }
  },

  clickSubItem(e){
    console.log(e)
  }
})

代码很简单 ，一看就明白