微信小程序-分级菜单-下拉条 图标选中状态

需求是为了将图标点击状态为垂直翻转

声明：一下也许不是最好的方法，本人今年还是一个学生，仅供参考，欢迎评论改正！

这个二级成员定义如下，比如内外科那里！

<view class="Level-2">
      <!-- 下拉条 二级 -->
    <text> {{item.name}} </text>
      <view wx:if="{{item.children.length > 0}}">
        <image class="{{activeIds[item.id] ? 'icon-DropDown-activa' : 'icon-DropDown'}}" src="/assets/sources/images/icon/pulldown2.png" mode="hightFix" bindtap="onimageclick" data-id="{{item.id}}" />
      </view>
</view>

简单说明一下item.name 是一级的testList 已经被wx:for 一遍了，item 相当于当前层的children。

data的数据结构如下

testList:[
        {
          "id": 1,
          "parentId": 0,
          "name": "综合医院",
          "level": 1,
          "children": [
            {
              "id": 11,
              "parentId": 1,
              "name": "内科",
              "level": 2,
              "children": [...]
            },
            {
              "id": 12,
              "parentId": 1,
              "name": "外科",
              "level": 2,
              "children": [
                {
                  "id": 121,
                  "parentId": 12,
                  "name": "普通外科",
                  "level": 3,
                  "children": []
                },
                {
                  "id": 122,
                  "parentId": 12,
                  "name": "神经外科",
                  "level": 3,
                  "children": []
                }
              ]
            }
          ]
        },
        ...
],

一开始想到用伪类去做，发现所有附有class 成员都变了... 直接懵了，目标是只有当前点击这个成员的图标变就行了。

我脑子直接想直接用两个class 分别定义翻转前和翻转后的样式：

/*下拉图标*/
.icon-DropDown{
  margin-left: calc(100% + 60px);
  width: 15px; height: 15px; padding-left: 10px;
}
.icon-DropDown-activa{
  margin-left: calc(100% + 60px);
  width: 15px; height: 15px; padding-left: 10px;
  transform:rotate(-180deg);
}

我也意识到这是很笨的方法，也太直肠子了... 哈哈 ，但是目前还没有更好的思路！！！

怎么用这两个class ? 仔细可以看到wxml我的image组件中定义了点击事件和传递的唯一id。

<image ...  bindtap="onimageclick" data-id="{{item.id}}" />

1. 如果id 在activeIds中，则判断为激活状态，将其失活——delete
2. 否则让其激活——true
3. this.setData更新

data:{      
        activeIds: {},//存储激活的 id
        imageStyle:"icon-DropDown" /* 图标点击样式 */
    },
    onimageclick: function(e) {
      const id = e.currentTarget.dataset.id;
      const activeIds = this.data.activeIds;
    
      // 切换 id 的激活状态
      if (activeIds[id]) {
        delete activeIds[id];
      } else {
        activeIds[id] = true;
      }
    
      this.setData({
        activeIds: activeIds
      });
    },

class传入id索引activeIds即可判断选择合适的class,你们认为如何呢？

<image class="{{activeIds[item.id] ? 'icon-DropDown-activa' : 'icon-DropDown'}}" .../>