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

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

html 复制代码
<el-menu
	class="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" ,将子菜单的触发方式改为通过点击事件触发。这样修改之后子菜单将点击一次打开,再次点击关闭,这样就成功修复了子菜单需要点击两次才会隐藏的问题,符合移动端交互习惯,如下:

html 复制代码
<el-menu
	class="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>
相关推荐
德育处主任2 分钟前
p5.js 入门:用 point () 绘制点的超简单教程
前端·javascript·canvas
yume_sibai20 分钟前
Vue 插槽
前端·javascript·vue.js
O败者食尘D41 分钟前
【Vue2】结合chrome与element-ui的网页端条码打印
前端·vue.js·chrome
橘颂TA1 小时前
【C++】C++11特性的介绍和使用(第三篇)
前端·c++·算法·c++11
爷_8 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee449 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro10 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin11 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说11 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang45311 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript