vue3 如何获取当前元素的后代元素有class="show"的元素?-灵析社区

JayCoder

无限级菜单 点击每项隐藏或显示每项的后代子菜单 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'] }

阅读量:22

点赞量:0

问AI
皮皮踢
两种方式: 一:纯"CSS"控制因为你加了"scoped",所以你需要".item ::v-deep .hidden"这样来设置后代元素 二:增加一个"prop",把"item.show"传入子组件来让子组件设置相应"class"