近期需要在微信小程序中實現(xiàn)三級的下拉目錄，要求是展開一個收起其他
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({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    subtwo: "-1",  // 打開的二級目錄
    subthree: "-1",  // 打開的三級目錄
    majorList: [
      {
        "subject": "農(nóng)學(xué)",
        "submajor": [
          {
            "subname": "自然",
            "major": [ "植物學(xué)", "花草學(xué)" ]
          },
          {
            "subname": "社會學(xué)",
            "major": ["人文", "歷史"]
          }
        ]
      },
      {
        "subject": "醫(yī)學(xué)",
        "submajor": [
          {
            "subname": "臨床醫(yī)學(xué)",
            "major": ["動物臨床醫(yī)學(xué)", "人體臨床醫(yī)學(xué)"]
          }
        ]
      }
    ]
  },
  // 點擊一級目錄
  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;
}