当前位置：首页 > news >正文

【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时，子菜单需要点击两次才会隐藏的问题

news 来源：原创 2025/5/1 17:32:07

【Element Plus】解决移动设备使用 `<el-menu>` 和 `<el-sub-menu>` 时，子菜单需要点击两次才会隐藏的问题

<el-menuclass="custom-menu"mode="horizontal"background-color="#fff"text-color="black"active-text-color="#0aa3ba"@select="handleSelect"popper-class="lang-menu-mobile"
><!-- 其余菜单选项略 --><el-sub-menu index="1" class="el-nav1"><template #title><div>{{ currentLanguage === 'zh' ? '中文' : 'EN' }}</div></template><el-menu-item @click="changeLanguage('zh')"><span>简体中文</span></el-menu-item><el-menu-item @click="changeLanguage('en')"><span>English</span></el-menu-item></el-sub-menu>
</el-menu>

在以上代码中，我就出现了当使用移动设备浏览页面时，子菜单需要点击两次才会隐藏的问题。

问题原因： Element Plus 的 el-menu 在水平模式（mode="horizontal"）下，默认通过 hover 触发子菜单弹出。移动端没有 hover 事件，点击会先触发 “hover 态” 打开子菜单，第二次点击才会触发真正的点击事件（关闭子菜单），所以会出现需要两次点击才隐藏子菜单的问题。

解决办法： 在 <el-menu> 中加上 menu-trigger="click" ，将子菜单的触发方式改为通过点击事件触发。这样修改之后子菜单将点击一次打开，再次点击关闭，这样就成功修复了子菜单需要点击两次才会隐藏的问题，符合移动端交互习惯，如下：

<el-menuclass="custom-menu"mode="horizontal"background-color="#fff"text-color="black"active-text-color="#0aa3ba"@select="handleSelect"popper-class="lang-menu-mobile"menu-trigger="click"
><!-- 其余菜单选项略 --><el-sub-menu index="1" class="el-nav1"><template #title><div>{{ currentLanguage === 'zh' ? '中文' : 'EN' }}</div></template><el-menu-item @click="changeLanguage('zh')"><span>简体中文</span></el-menu-item><el-menu-item @click="changeLanguage('en')"><span>English</span></el-menu-item></el-sub-menu>
</el-menu>