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

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

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

<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>