vue中一级二级菜单的展开与折叠

<ul class="asideMenu h100">
                <li class="bigLi" v-for="(item,index) in menuList" :key="index"> 
                    <div class="oneMenu" @click="showToggle(item,index,item.id)"> 
                        <span class="jkMenuTitle">{{item.scenicName}}</span> 
                        <img :src="item.id==currItem?rightImg:require('../../../../assets/images/ssjk/rig.png')" alt="" class="img2">
                    </div> 
                    <ul class="sonUl" v-show="item.isSubShow"> 
                        <li class="smaili" v-for="(item,index) in MonitorList" :key="index"> 
                            <input type="checkbox" id="jack" :value="item.monitoringPointName" v-model="checkedNames">
                            <label class="oneMenuChild" for="jack"  @click="sendMsg(item.monitoringPointAddress)">{{item.monitoringPointName}}</label>
                        </li> 
                    </ul>
                </li> 
            </ul> 

export default {
  data() {
    return {
      currItem: 0,
      checkedNames: [],
      currPage: 1,
      pagesize: 9999999,
      mCurrPage: 1,
      mPagesize: 9999999,
      total: 0,
      rightImg: require('../../../../assets/images/ssjk/rig.png'),
      menuList: [
        
      ],
      MonitorList: []
    };
  },
  methods: {
    showToggle: function(item, ind, id) {
      this.getMonitor(id)
      this.menuList.forEach(i => {
        if (i.isSubShow !== this.menuList[ind].isSubShow) {
          i.isSubShow = false;
          this.rightImg = require('../../../../assets/images/ssjk/rig.png')
        } else{
          this.rightImg = require('../../../../assets/images/ssjk/down.png')
        }
      });
      this.currItem = item.id
        item.isSubShow = !item.isSubShow;
    },
    //景点
    async getjingdian(){
      var res = await this.$http.post(
          '。。。。。。。。。。', 
          qs.stringify({
              CurrentPage: this.currPage, 
              PageSize: this.pagesize
          })
      )
      let{data, isSuccess} = res.data
      if(!isSuccess){
          this.$message.console.error(message);
      } else{
        data.list.forEach((item,index)=>{
          item.isSubShow = false
        })
          this.menuList = data.list
          this.currPage = data.currentPage
          this.pagesize = data.pageSize
          this.total = data.totalCount
      }
    },
    //监控点
    async getMonitor(id){
      this.showChild = !(this.showChild)
      var res = await this.$http.post(
            '。。。。。。。。。。',
            qs.stringify({
                ScenicId: id,
                CurrentPage: this.mCurrPage,
                PageSize: this.mPagesize
            })
      )
      let{data, isSuccess} = res.data
      if(!isSuccess){
          this.$message.console.error(message);
      } else{
          this.MonitorList = data.list
      }
    },
    sendMsg(videoUrl){
      // this.$emit('getVideoUrl',videoUrl)
      this.$emit('getVideoUrl',videoUrl)
      
    }
  },
  mounted(){
    this.getjingdian()
  }
};