Vue.js中点击下拉菜单时如何隐藏其他已展开菜单？

你当前用多个独立ref控制每个菜单的显示状态，不仅代码冗余，也难实现“点击一个菜单时关闭其他已展开项”的需求。可以通过单个状态变量管理当前展开的菜单标识来解决这个问题，具体修改如下：

优化后的代码 #

<script setup>
import { ref } from 'vue';
// 用单个变量记录当前展开的菜单ID，初始为null表示没有菜单展开
const currentOpen = ref(null);

// 统一的点击处理函数，接收菜单ID作为参数
function toggleMenu(menuId) {
  // 如果点击的是当前已展开的菜单，就关闭；否则切换到该菜单
  currentOpen.value = currentOpen.value === menuId ? null : menuId;
}
</script>

<template>
  <button @click="toggleMenu('menu1')" type="button">show</button>
  <button @click="toggleMenu('menu2')" type="button">show</button>
  <button @click="toggleMenu('menu3')" type="button">show</button>

  <div :class="{'block': currentOpen === 'menu1', 'hidden': currentOpen !== 'menu1'}" class="sm:hidden">show1</div>
  <div :class="{'block': currentOpen === 'menu2', 'hidden': currentOpen !== 'menu2'}" class="sm:hidden">show2</div>
  <div :class="{'block': currentOpen === 'menu3', 'hidden': currentOpen !== 'menu3'}" class="sm:hidden">show3</div>
</template>

关键改动说明 #

• 状态简化：把hideshow1/hideshow2/hideshow3三个变量合并成currentOpen，它的值是当前展开菜单的ID（menu1/menu2/menu3），null表示所有菜单都关闭。
• 统一处理函数：用toggleMenu一个函数替代原来的三个showX函数，通过传入菜单ID来控制状态，避免重复代码。
• 逻辑实现：点击按钮时，判断当前点击的菜单是否已经展开——如果是就关闭（设为null），否则设置为该菜单ID，自动隐藏其他菜单。
• 修复原代码问题：原<script setup>里不需要用this，直接访问ref的.value即可（模板里不用写.value，Vue会自动解析）。

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