小程序实现jquery "toggle"效果的折叠面板

小程序中只能操作数据，不能获得DOM元素，控制DOM元素的显示和隐藏需要绑定变量来进行控制，如果需要控制一组DOM元素的需要借助于数组来实现。

index.wxml：
//使用远程请求数据，将DOM结构循环即可

 <view class="item-list">
    <view class="item">
      <view class="item-tit" data-index="0" bindtap="bindViewTap">
        第一个
      </view>
      <view class="item-con {{statusArr[0] ? 'vshow' : 'vhide'}}">
        第一个的内容
      </view>     
    </view>
     <view class="item">
      <view class="item-tit" data-index="1" bindtap="bindViewTap">
        第二个
      </view>
      <view class="item-con {{statusArr[1] ? 'vshow' : 'vhide'}}">
        第二个的内容
      </view>     
    </view>
     <view class="item">
      <view class="item-tit" data-index="2" bindtap="bindViewTap">
        第三个
      </view>
      <view class="item-con  {{statusArr[2] ? 'vshow' : 'vhide'}}">
        第三个的内容
      </view>     
    </view>
  </view>

index.wxss：

.vshow{
  display:block !important;
}
.vhide{
  display:none !important;
}
.item-tit{
  border:1px solid #eee;
  height:80rpx;
  line-height:80rpx;
}
.item-con{
  height:100rpx;
  background:#aaa;
  font-size:16px;  
  display:none;
}

index.js

Page({
  data: {
       statusArr:[false,false,false]//假设有三个，这个可根据返回的数据个数进行赋值       
  },
  //事件处理函数
  bindViewTap: function(e) {
    var that = this;
    var idx = e.target.dataset.index;

    var updateStatusArr = that.data.statusArr.slice(0); //复制新数组

    updateStatusArr[idx] = !that.data.statusArr[idx];

    that.setData({      
      'statusArr': updateStatusArr
    });    
  },
  onLoad: function () {  

  }
});

           

效果：