原文链接地址：https://www.cnblogs.com/adobe-lin/p/9564549.html

微信小程序实现折叠面板

wxml:

<view class='help'><view class='help_item'><view class='title' data-index='1' catchtap='panel'><view class='title_1'>便签小程序使用免费吗</view><view class='title_2'><image src="../../images/{{showIndex == 1 ? 'up':'down'}}.png"></image></view></view><view class='detail' wx:if="{{showIndex == 1}}">便签小程序是一款免费应用，并承诺永不收费1</view></view><view class='help_item'><view class='title' data-index='2' catchtap='panel'><view class='title_1'>便签小程序使用免费吗</view><view class='title_2'><image src="../../images/{{showIndex == 2 ? 'up':'down'}}.png"></image></view></view><view class='detail' wx:if="{{showIndex == 2}}">便签小程序是一款免费应用，并承诺永不收费2</view></view><view class='help_item'><view class='title' data-index='3' catchtap='panel'><view class='title_1'>便签小程序使用免费吗</view><view class='title_2'><image src="../../images/{{showIndex == 3 ? 'up':'down'}}.png"></image></view></view><view class='detail' wx:if="{{showIndex == 3}}">便签小程序是一款免费应用，并承诺永不收费3</view></view></view>

wxss:

.help {  width: 700rpx;  margin: 0 auto;}.help .help_item {  margin: 10rpx auto;}.help .help_item .title {  font-size: 30rpx;  height: 60rpx;  line-height: 60rpx;  background: #e2e2e2;  display: flex;}.help .help_item .title .title_1 {  width: 630rpx;  height: 60rpx;  padding-left: 20rpx;}.help .help_item .title .title_2 {  width: 50rpx;  height: 60rpx;  text-align: center;}.help .help_item .title .title_2 image {  width: 40rpx;  height: 40rpx;  margin: 10rpx auto;}.help .help_item .detail {  margin: 10rpx auto;  font-size: 25rpx;  line-height: 40rpx;  text-indent: 2em;}

js:

/**

  * 页面的初始数据

  */  data: {

    showIndex:0  },

panel:function (e) {

    if(e.currentTarget.dataset.index !=this.data.showIndex) {

      this.setData({

        showIndex: e.currentTarget.dataset.index

      })

    } else {

      this.setData({

        showIndex: 0      })

    }

  }

 最终效果：