原文链接地址：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 })
}
}
最终效果：
