小程序树形列表的加载哪里写错了？

Question

最近做一个小程序的视频目录列表，本人学生一枚，对小程序的学习暂时较为浅显，目前遇到了以下问题：
点击列表时，只有图标发生变化，子列表不进行显示，不知道那里处了问题
呈上代码片段一份：

点击时应该展开列表

js部分：

data:{
    cityResults: [{
      cityName: "上海",
      cityPY: "sh",
      cityPinYin: "shanghai",
      id: "1",
      isOpen: true,
      pid: "00000000-0000-0000-0000-000000000000",
      list: [{
        cityName: "上海一区",
        cityPY: "shyq",
        cityPinYin: "shanghaiyiqu",
        id: "2",
        pid: "e8f8e5d8-220e-4baf-863f-2fdb3d3bc26f",
        isOpen: true,
        list: [{
          cityName: "添加测试",
          cityPY: "tjcs",
          cityPinYin: "tianjiaceshi",
          id: "3",
          isOpen: true,
          pid: "fcd302fd-62ee-485c-8257-a13765af723c",
        },
        {
          cityName: "上海一曲一曲",
          cityPY: "shyqyq",
          cityPinYin: "shanghaiyiquyiqu",
          id: "4",
          isOpen: true,
          pid: "fcd302fd-62ee-485c-8257-a13765af723c",
          list: [
            {
              cityName: "添加测试123123",
              cityPY: "tjcs",
              cityPinYin: "tianjiaceshi",
              id: "5",
              isOpen: true,
              pid: "fcd302fd-62ee-485c-8257-a13765af723c",
            }
          ]
        }
        ]
      }]
    }, {
      cityName: "云南",
      cityPY: "yn",
      cityPinYin: "yunnan",
      id: "33bec10c-e8b6-4b7f-bad0-53220319f5cc",
      isOpen: false,
      pid: "00000000-0000-0000-0000-000000000000",
      list: [{
        cityName: "德宏傣族景颇族自治州",
        cityPY: "dhdzjpzzzz",
        cityPinYin: "dehongdaizujingpozuzizhizhou",
        id: "942813c1-836b-4b6a-b581-62c1e6633dd4",
        isOpen: false,
        pid: "33bec10c-e8b6-4b7f-bad0-53220319f5cc",
      },
      {
        cityName: "撒饭卡上百度空间发噶大师傅卡上",
        cityPY: "dhdzjpzzzz",
        cityPinYin: "dehongdaizujingpozuzizhizhou",
        id: "942813c1-836b-4b6a-b581-62c1e6633dd4",
        isOpen: false,
        pid: "33bec10c-e8b6-4b7f-bad0-53220319f5cc",
      }]
    },
    {
      cityName: "撒饭卡上百度空间发噶大师傅卡上",
      cityPY: "dhdzjpzzzz",
      cityPinYin: "dehongdaizujingpozuzizhizhou",
      id: "942813c1-836b-4b6a-b581-62c1e6633dd4",
      isOpen: false,
      pid: "33bec10c-e8b6-4b7f-bad0-53220319f5cc"
    }]
  },
  openList: function (e) {//取消事件
    var that = this;
    var course = that.data.cityResults;
    var index = e.currentTarget.dataset.index;
    if (course[index].isOpen == false) {
      course[index].isOpen = true;
      course[index].list[index].isOpen = true;
      var temp = course[index];
      course[index] = temp;
      that.setData({
        cityResults: course
      })
      console.log(course)
    } else {
      course[index].isOpen = false;
      course[index].list[index].isOpen = false;
      var temp = course[index];
      course[index] = temp;
      that.setData({
        cityResults: course
      })
      console.log(course)
    }
  },

前端：

<view class='city-item-content'>
<view class="padding_left40 margin_bottom10" wx:for="{{cityResults}}" wx:for-item="citys" wx:for-index="citysIndex" wx:key="{{citysIndex}}">
  <view class="{{citys.list?'city-item-A-Z':'city-item1'}}"  bindtap='openList' data-index="{{citysIndex}}">
    <text wx:if="{{!citys.list}}" class="iconfont icondian-copy text_theme margin_right15"></text>
    <text wx:else class="{{citys.isOpen?'iconjian':'iconjia'}} iconfont margin_right15"></text>
    {{citys.cityName}}
  </view>
</view>

</view>
<view wx:if="{{!cityResults.length>0}}" class="width_100 height_100 flex_align justify_content">
  没有内容
</view>

代码样式：

.a-z{
  width: 35rpx;
  position: fixed;
  top: 112rpx;
  text-align: center;
  right: 5rpx;
  color: #f27800;
  font-size: 30rpx;
  /* border: 1rpx solid #3399CC; */
}


.city-item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 110rpx;
  background-color: #FFFFFF;
}

.city-item {
  background: #fff;
  /* margin-top: 5rpx; */
  width: 90%;  
  padding-left: 10%;
  margin-left: 5%;
  height: 90rpx;
  font-size: 32rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #CCCCCC;    
  /* border:1rpx solid red; */
}

.city-item-A-Z{
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  padding-left: 10%;
  background-color: #f1f1f1;
  border-top: 2rpx solid #f1f1f1;    
  margin-top: -1rpx;
}
.city-item1{
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  padding-left: 10%;
  background-color: #fff;
  border-top: 2rpx solid #f1f1f1;    
  margin-top: -1rpx;
}

.search-box {
  top: 0;
  position: fixed;
  width: 100%;
  /* left:5%; */
  background: #eee;
  height: 110rpx;
  font-size: 30rpx;
  border-bottom:1rpx solid #DDDDDD; 
     /* border: 1rpx solid red;   */
}

.search-input {
  height: 70rpx;
  line-height: 60rpx;
  width: 80%;
  margin-left: 7.5%;
  border-radius: 10rpx;
  /* border: 1rpx solid red; */
  background: #fff;
  margin-top: 20rpx;
  padding-left: 5%;
}

.search-input-placeholder {
  text-align: center;
}

小白一个，恳请各位大神看一下哪里出了问题

代码片段
https://developers.weixin.qq.com/s/CVhvBKmf7n7n

Answer 1

参考GPT和自己的思路：

看了你提供的代码，发现问题可能出在openList这个函数里面。在代码的第81行到85行，你对当前点击的列表项设置isOpen为true，但是只是修改了当前项的数据，没有对它的子列表进行修改。所以点击的时候只有当前项的图标发生变化，但是子列表不进行显示。

解决方法：需要使用递归的方式对所有的子列表进行isOpen的设置。具体代码如下：

openList: function (e) {
  var that = this;
  var cityResults = that.data.cityResults;
  var index = e.currentTarget.dataset.index;

  function setChildOpen(list, isOpen) {
    for (var i = 0; i < list.length; i++) {
      var item = list[i];
      item.isOpen = isOpen;
      if (item.list && item.list.length > 0) {
        setChildOpen(item.list, isOpen);
      }
    }
  }

  if (cityResults[index].isOpen == false) {
    cityResults[index].isOpen = true;
    setChildOpen(cityResults[index].list, true);
  } else {
    cityResults[index].isOpen = false;
    setChildOpen(cityResults[index].list, false);
  }

  that.setData({
    cityResults: cityResults
  });
}

把原来的81到98行代码替换成上述代码就可以实现子列表的展开了。