当前位置: 首页 > ds >正文

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

【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>
http://www.xdnf.cn/news/1455.html

相关文章:

  • 记录一下线性回归的学习
  • 极狐GitLab 如何撤销变更?
  • 数据结构线性表的顺序存储结构
  • c语言之杂识
  • 璞华ChatBI闪耀2025数博会:对话式数据分析引领数智化转型新范式
  • BM1684X+FPGA+GMSL视觉解决方案:驱动工业智能化升级的核心引擎
  • 卷积神经网络常用结构
  • 第一章:基于Docker环境快速搭建LangChain框架的智能对话系统:从langchain环境搭建到多轮对话代码实现(大语言模型加载)
  • 读书笔记:淘宝十年产品与技术演进史
  • 第一篇:Django简介
  • java将pdf转换成word
  • 中兴云电脑W102D_晶晨S905X2_2+16G_mt7661无线_安卓9.0_线刷固件包
  • 学习设计模式《五》——工厂方法模式
  • JavaScript-防抖和节流
  • 工业相机中CCM使能参数-色彩校正矩阵
  • 【SpringCloud】Gateway
  • JavaFX 第一篇 Hello World
  • 《让机器人读懂你的心:情感分析技术融合奥秘》
  • Java 中实现 Oracle 分页查询
  • CS144 Lab3 实战记录:TCP 发送器实现
  • [蓝桥杯 2025 省 Python B] 异或和
  • 2025-04-23 Python深度学习3——Tensor
  • 设计模式之策略模式
  • 富文本编辑器实现
  • C++ STL 容器简介(蓝桥杯适用精简版)
  • 解决报错:this[kHandle] = new _Hash(algorithm, xofLen);
  • Java面试题汇总
  • CSS-跟随图片变化的背景色
  • 【Java学习笔记】选择结构
  • 4月23日作业