there are two buttons An and B, and there are c and d in A
Be f
now the situation is that press A, B will expand
press B, A will also expand
wxml
<view class="bg-white" wx:for="{{ dataInfo }}" wx:key="item">
<view class="data-info" data-idx="{{ index }}" bindtap="expandDetail">
<view>
<button class="aaa" disabled="{{disabled}}" bindtap="submit">
<text>AAA</text>
</button>
</view>
</view>
<!-- -->
<view class="data-expand p10 border-bottom" wx:if="{{ item.flag }}">
<button class="ccc" type="warn">ccc</button>
<button class="ddd" type="warn">ddd</button>
</view>
</view>
<view class="bg-white" wx:for="{{ dataInfo }}" wx:key="item">
<view class="data-info" data-idx="{{ index }}" bindtap="expandDetail">
<view>
<button class="bbb" disabled="{{disabled}}" bindtap="submit">
<text>BBB</text>
</button>
</view>
</view>
<!-- -->
<view class="data-expand p10 border-bottom" wx:if="{{ item.flag }}">
<button class="eee" type="warn">eee</button>
<button class="fff" type="warn">fff</button>
</view>
</view>
jsPage({
data: {
tempInfo: [{ //
}, ],
dataInfo: [], //
},
expandDetail: function (e) {
var idx = e.currentTarget.dataset.idx, //
key = "dataInfo[" + idx + "].flag",
val = this.data.dataInfo[idx].flag;
this.setData({
[key]: !val
});
},
onLoad: function(opt) {
for (var i in this.data.tempInfo) {
this.data.tempInfo[i].flag = false; //
};
this.setData({
dataInfo: this.data.tempInfo
});
},
})