最近在學(xué)習(xí)小程序，入手項(xiàng)目中有個(gè)使用折疊菜單功能，google下了思路。

關(guān)于文章https://blog.csdn.net/qq_35770969/article/details/81477145
中也實(shí)現(xiàn)了一樣的功能但是此方法是針對(duì)數(shù)據(jù)屬性來hidden的，但是不能添加css動(dòng)效

我依照文案中的數(shù)據(jù) 也實(shí)現(xiàn)了類似功能，但是我用的class方式來 顯示隱藏，可以在css中添加自己想要的動(dòng)效。

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({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    memberList: [{
        iamges: "/assets/logo_aiqiyi2x.png",
        cont: "愛奇藝影視會(huì)員",
        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: "騰訊視頻會(huì)員",
        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: "優(yōu)酷視頻黃金會(huì)員",
        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: "搜狐視頻黃金會(huì)員",
        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天有效'
          },
        ]
      },
    ]
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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)
  }
})

代碼很簡(jiǎn)單 ，一看就明白