wxml

<view class='text'>
  <text>方法一</text>
</view>
<view wx:for="{{list}}" wx:key="content" wx:for-index="key">
  <view class='title' data-index='{{key}}' bindtap='hiddenBtn'>
    <label>aaa {{item.id+1}}</label>
  </view>
  <view hidden='{{item.hidden}}'>
    <view class='line'></view>
    <view class='content'>
      <label>bbb</label>
    </view>
  </view>
  <view class='line_bottom'></view>
</view>
<view class='text'>
  <text>方法二</text>
</view>
<view wx:for="{{listCon}}" wx:key="content" wx:for-index="key">
  <view class='title' data-index='{{key}}' bindtap='hiddenBtnCon'>
    <label>aaa {{item.id+1}}</label>
  </view>
  <view class='{{item.hidden == false? "hide":"show"}}'>
   xxxx
  </view>
  <view class='{{item.hidden == true? "hide":"show"}}'>
    <view class='line'></view>
    <view class='content'>
      <label>bbb</label>
    </view>
  </view>
  <view class='line_bottom'></view>
</view>
 

wxss

.text{
background-color: #eee;
padding: 5rpx;
}
/*標題 */
.title{
padding: 15rpx;
}
/*內容 */
.content{
padding: 25rpx 30rpx;
background-color: #ddd
}
.line{
border: 1rpx solid #eee;
}
.line_bottom{
border: 8rpx solid #eee;
}
/*隱藏 */
.hide{
display: none;
}
/*顯示 */
.show{
display: block;
}

js

data: {
    list: [
      { 'id': 0, 'hidden': true },
      { 'id': 1, 'hidden': true },
      { 'id': 2, 'hidden': true },
    ],
    listCon: [
      { 'id': 0, 'hidden': true },
      { 'id': 1, 'hidden': true },
      { 'id': 2, 'hidden': true },
    ]
  },
  // 方法一
  hiddenBtn: function (e) {
    var that = this;
    // 獲取事件繫結的當前元件
    var index = e.currentTarget.dataset.index;
    // 獲取list中hidden的值
    // 隱藏或顯示內容
    that.data.list[index].hidden = !that.data.list[index].hidden;
    that.setData({
      list: that.data.list
    })
  },
  // 方法二
  hiddenBtnCon: function (e) {
    var that = this;
    var index = e.currentTarget.dataset.index;
    that.data.listCon[index].hidden = !that.data.listCon[index].hidden;
    that.setData({
      listCon: that.data.listCon
    })
  },