无限级菜单 点击每项隐藏或显示每项的后代子菜单 let menus = defineProps({ 'menu': Array }) let hide = (item) => { item['show'] = true } {{ item['name'] }} 0"> .item .hidden { visibility: visible; } .item .show { visibility: hidden; } 这是另一个vue文件 import {reactive, ref} from "vue"; import IMenuItem from "@/pages/IMenuItem.vue"; let json = reactive([ { name: '一级', children: [ { name: '二级', children: [ { name: '三级', children: [ { name: '四级', children: [] } ] } ] }, { name: '二级', children: [] } ] }, { name: '一级', children: [ { name: '二级', children: [ { name: '三级', children: [ { name: '四级', children: [] } ] } ] }, { name: '二级', children: [] } ] }, ]) 以下是我实现的方法 let hide = (item, event) => { event.stopPropagation() let childMenus = event.target.querySelectorAll(".item"); if (item['show']) { childMenus.forEach(childMenu => { childMenu.style.visibility = "visible"; }) } else { childMenus.forEach(childMenu => { childMenu.style.visibility = "hidden"; }) } item['show'] = !item['show'] }