近期需要在微信小程序中实现三级的下拉目录，要求是展开一个收起其他
wxml部分

<view wx:for="{{majorList}}" wx:key="index" class='majorlist'>
    <!-- 一级目录 -->
    <view class='subjectname' data-indexone="{{index}}" bindtap="openTwo">
      <image mode='cover' src='{{libPath}}leftright.png' hidden='{{subtwo == index}}'></image>
      <image class='downimg' mode='cover' src='{{libPath}}down.png' hidden='{{subtwo != index}}'></image>
      <text>{{item.subject}}</text>
    </view>
   <view hidden="{{subtwo != index }}">
  <!--  <view style=" display: {{subtwo == index ? 'block' : 'none' }} "> -->
      <view wx:for="{{item.submajor}}" wx:key="index">
        <!-- 二级目录 -->
        <view class='subname' data-indextwo='{{index}}' bindtap="openThree">
          <image mode='cover' src='{{libPath}}leftright.png' hidden='{{subthree == index}}'></image>
          <image class='downimg' mode='cover' src='{{libPath}}down.png' hidden='{{subthree != index}}'></image>
          <text>{{item.subname}}</text>
        </view>
        <!-- 三级目录 -->
        <view hidden='{{subthree != index}}'>
        <!-- <view style=" display: {{subthree == index ? 'block' : 'none' }} ">-->
          <view wx:for="{{item.major}}" wx:key="index" class='majorname'>{{item}}</view>
        </view>
      </view>
   </view>
</view>

JS 部分

Page({
  /**
   * 页面的初始数据
   */
  data: {
    subtwo: "-1",  // 打开的二级目录
    subthree: "-1",  // 打开的三级目录
    majorList: [
      {
        "subject": "农学",
        "submajor": [
          {
            "subname": "自然",
            "major": [ "植物学", "花草学" ]
          },
          {
            "subname": "社会学",
            "major": ["人文", "历史"]
          }
        ]
      },
      {
        "subject": "医学",
        "submajor": [
          {
            "subname": "临床医学",
            "major": ["动物临床医学", "人体临床医学"]
          }
        ]
      }
    ]
  },
  // 点击一级目录
  openTwo(e) {
    var indexone = e.currentTarget.dataset.indexone
    if (this.data.subtwo == indexone) {
      this.setData({
        subtwo: "-1",
        subthree: "-1"
      })
    } else {
      this.setData({
        subtwo: indexone,
        subthree: "-1"
      })
    }
  },
  // 点击二级目录
  openThree(e) {
    var indextwo = e.currentTarget.dataset.indextwo
    if (this.data.subthree == indextwo) {
      this.setData({
        subthree: "-1"
      })
    } else {
      this.setData({
        subthree: indextwo
      })
    }
  },
})

wxss 部分

.majorlist image {
  width: 12rpx;
  height: 22rpx;
  margin-right: 12rpx;
}
.subjectname {
  height: 116rpx;
  padding-left: 30rpx;
  line-height: 116rpx;
  border-bottom: 1px solid #f6f6f6;
  color: #414141;
  font-size: 34rpx;
}
.subname {
  height: 116rpx;
  padding-left: 60rpx;
  line-height: 116rpx;
  border-bottom: 1px solid #f6f6f6;
  color: #414141;
  font-size: 34rpx;
}
.majorname {
  height: 116rpx;
  padding-left: 60rpx;
  line-height: 116rpx;
  border-bottom: 1px solid #f6f6f6;
  color: #989898;
  font-size: 34rpx;
}
.downimg {
  width: 22rpx!important;
  height: 12rpx!important;
}