微信小程序实现toggle点击隐藏显示

微信小程序实现toggle点击隐藏显示，效果如下：

image.png

实现代码
index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    activeIndex: '',
    activeDropDown: false
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
   /**
   * 点击下拉显示框 再点击隐藏
   */
  show(e){
    if(this.data.activeIndex == e.currentTarget.dataset.num && this.data.activeDropDown){
      this.setData({
        activeDropDown: false
      })
    }else{
      this.setData({
        activeDropDown: true
      })
    }
    this.setData({
      activeIndex: e.currentTarget.dataset.num
    })
  }
})

index.wxml

<view class="page-pad30">
  <view class="list" wx:for="{{2}}" wx:key="index">
    <view class="list-title flex flex-between flex-items-center page-pad30" data-num="{{index+1}}" bindtap="show">
      第{{index+1}}列
      <image src="/images/arrow.png" style="transition:transform 0.3s;transform:rotate({{activeIndex === index+1 && activeDropDown ? '90' : '0'}}deg)"/>
    </view>

    <!-- style 其中40*4 40为列表格的固定高度，单位为px，3为列表格数量 -->
    <view class="list-box page-pad30" style="transition:height 0.3s;height:{{activeIndex === index+1 && activeDropDown ? 40*3 : '0'}}px;">
      <!-- 展示行 -->
      <view class="box-cont flex flex-between flex-items-center border">
        scroll-view
        <image src="/images/arrow.png"/>
      </view>
      <view class="box-cont flex flex-between flex-items-center border">
        action-sheet
        <image src="/images/arrow.png"/>
      </view>
      <view class="box-cont flex flex-between flex-items-center">
        navigator
        <image src="/images/arrow.png"/>
      </view>
    </view>
  </view>
</view>

index.wxss

.list{
  margin-bottom: 30rpx;
  border-radius: 15rpx;
  background-color: #ffffff;
  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1);
}
.list-title{
  line-height: 100rpx;
}
.list-box{
  overflow: hidden;
}
.box-cont{
  line-height: 70rpx;
}
.border{
  border-bottom: #E5E5E5 1px solid;
}
image{
  width: 35rpx;
  height: 35rpx;
}