Element-plus中点击el-sub-menu时所有同级的其他子菜单同时展开或折叠

在Element-plus中，<el-sub-menu>组件用于创建带有下拉菜单的导航项。当你点击一个<el-sub-menu>时，它通常会展开，而其他同级的<el-sub-menu>会折叠。这是Element-plus的标准行为，不需要额外的代码来实现同级菜单的展开和折叠。

如果你需要通过代码控制同级菜单的展开和折叠，你可以使用<el-sub-menu>的popper-class属性来为下拉菜单设置一个类名，然后通过这个类名控制其展开和折叠状态。

以下是一个简单的例子，展示如何使用Vue.js和Element-plus来控制同级菜单的展开和折叠：

<template>
  <el-menu default-active="1-1" class="el-menu-vertical-demo">
    <el-sub-menu index="1">
      <template #title>导航一</template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>导航二</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMenu, ElSubMenu, ElMenuItem } from 'element-plus';
 
// 使用 ref 来引用菜单实例
const menu = ref(null);
</script>

在这个例子中，我们使用了Element-plus的<el-menu>和相关子组件来创建一个下拉菜单。每个<el-sub-menu>都有它自己的下拉内容，并且它们可以独立地展开和折叠。这是Element-plus的默认行为，不需要额外的代码来控制它们。如果你需要通过代码控制它们，可以使用Element-plus提供的open和close方法来实现。

请注意，Element-plus的版本和API可能随着时间而变化。请确保查看最新的Element-plus文档以获取准确的API和使用方法。