微信小程序，两个按钮同时展开

Question

一页中有两个按钮：

• 按钮A包含两个子按钮c和d
• 按钮B包含两个 sub_button e和f

当用户

• 按下按钮A，sub_button c和d应该展开
• 按下按钮B，sub_button e和f应该展开

但是现在当我按下按钮A或B时，所有子按钮都将展开，而A B不应互相影响。

<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>

 Page({
    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
        });
    },
 })