Vue JavaScript实现点击li只为内部对应ul添加样式的问题

你当前的问题在于使用了一个全局的sub_menu_show变量控制所有子菜单的显示状态，导致点击任何一个li都会同时切换所有子ul的样式。要实现单个菜单独立控制，有以下几种可行方案：

方案1：用标识跟踪当前激活菜单（适合多菜单场景） #

通过存储当前激活菜单的唯一标识，让每个子ul只在对应标识匹配时应用样式。

修改Vue代码 #

import { reactive } from 'vue'

export default {
    setup(){
        const data = reactive({
            activeMenu: null, // 存储当前激活的菜单ID，比如'profile'/'media'
        });

        const toggleSubMenu = (menuId) => {
            // 点击已激活的菜单则关闭，否则切换到该菜单
            data.activeMenu = data.activeMenu === menuId ? null : menuId
        }

        return{
            data,
            toggleSubMenu
        }
    }
}

修改HTML结构 #

给每个点击的li传递对应菜单标识，子ul的class绑定判断当前激活标识是否匹配：

<ul>
   <li>Menu</li>
   <li @click="toggleSubMenu('profile')">Profile
      <ul :class="{ 'd-block': data.activeMenu === 'profile' }">
          <li>History</li>
      </ul>
   </li>
   <li @click="toggleSubMenu('media')">Media
      <ul :class="{ 'd-block': data.activeMenu === 'media' }">
          <li>Photos</li>
          <li>Videos</li>
      </ul>
   </li>
</ul>

方案2：给每个菜单设置独立布尔状态（适合少菜单场景） #

为每个子菜单单独设置布尔变量，直接控制对应ul的显示。

修改Vue代码 #

import { reactive } from 'vue'

export default {
    setup(){
        const data = reactive({
            profileMenuShow: false,
            mediaMenuShow: false,
        });

        const toggleSubMenu = (menuKey) => {
            data[menuKey] = !data[menuKey]
        }

        return{
            data,
            toggleSubMenu
        }
    }
}

修改HTML结构 #

<ul>
   <li>Menu</li>
   <li @click="toggleSubMenu('profileMenuShow')">Profile
      <ul :class="{ 'd-block': data.profileMenuShow }">
          <li>History</li>
      </ul>
   </li>
   <li @click="toggleSubMenu('mediaMenuShow')">Media
      <ul :class="{ 'd-block': data.mediaMenuShow }">
          <li>Photos</li>
          <li>Videos</li>
      </ul>
   </li>
</ul>

方案3：动态菜单场景（数组循环渲染） #

如果菜单是从后端获取或动态生成的，可以将菜单数据与状态绑定在一起：

Vue代码 #

import { reactive } from 'vue'

export default {
    setup(){
        const data = reactive({
            menus: [
                { id: 'profile', name: 'Profile', items: ['History'], show: false },
                { id: 'media', name: 'Media', items: ['Photos', 'Videos'], show: false },
            ]
        });

        const toggleSubMenu = (menu) => {
            menu.show = !menu.show
        }

        return{
            data,
            toggleSubMenu
        }
    }
}

HTML结构 #

<ul>
   <li>Menu</li>
   <li v-for="menu in data.menus" :key="menu.id" @click="toggleSubMenu(menu)">
      {{ menu.name }}
      <ul :class="{ 'd-block': menu.show }">
          <li v-for="item in menu.items" :key="item">{{ item }}</li>
      </ul>
   </li>
</ul>

内容的提问来源于stack exchange，提问作者ASHafizullah