Element UI 水平菜单：如何将子菜单展开方式从悬停改为点击？前端开发实战解析

1. 背景与目标

悬停触发与点击触发的对比

在水平菜单中，子菜单的展开通常受悬停行为驱动，这在桌面端会带来流畅的悬浮体验。然而，在触控设备和无鼠标环境下，依赖悬停的展开会导致用户无法直达子项，因此需要将展开方式从悬停改为点击触发，以提升可用性与无障碍性。

通过将展开行为调整为点击触发，可以实现跨设备的一致性行为，从而提升用户体验。作为前端开发实战解析的一部分，这篇文章将聚焦如何在 Element UI 水平菜单中完成该改造，并给出可落地的实现思路与代码示例。

2. Element UI 水平菜单结构与默认行为

核心结构与默认交互

Element UI 的水平菜单由el-menu组件构成，设置属性 mode="horizontal" 即为水平排列。子项使用el-submenu 展示有层级的条目，内部包含 el-menu-item 等子项。默认情况下，el-submenu 会在鼠标悬浮到标题区域时展开所包含的子项，这种行为对桌面端较友好，但在移动端会出现不可点击的问题。

另外，水平菜单也支持透传属性，例如 default-openeds 用于指定初始展开的子菜单，结合事件机制可以实现更多自定义行为，但核心展开交互仍然以悬停触发为主。本文将依托该结构，给出将展开方式从悬停改为点击的实现路径。

3. 将展开方式从悬停改为点击的实现思路

方案概览

方案A：通过模板变更，将子菜单标题区域设为可点击的区域，并在点击时触发展开/收起。优点是对现有组件的侵入性较小，兼容性较好；缺点是需要处理内部展开状态的切换，可能依赖具体版本的实现细节。

方案B：通过自定义指令或封装组件，将点击展开的行为抽象成可复用的逻辑，提升可维护性与复用性，同时减小对 Element UI 内部实现的耦合。

实现示例1：模板改造实现点击展开

以下示例展示如何在 el-submenu 的标题区域放置一个可点击元素，并通过点击来控制子菜单的展开。该方案适合快速落地并在现有代码中最小改动。注意需要在标题模板中捕获点击事件并阻止冒泡，以避免与默认悬停行为冲突。

实现示例2：自定义指令实现点击展开

为了提高稳定性与可维护性，可以将该交互抽象为一个自定义指令，统一为所有子菜单标题绑定点击事件，从而实现点击展开的行为。这种方案提升了复用性，并降低对不同 Element UI 版本的耦合。

// 自定义指令 v-toggle-submenu
Vue.directive('toggle-submenu', {inserted(el) {const titles = el.querySelectorAll('.el-submenu__title');titles.forEach(title => {title.style.cursor = 'pointer';const onClick = (e) => {const submenu = title.closest('.el-submenu');submenu.classList.toggle('is-opened');e.stopPropagation();};title.addEventListener('click', onClick);// 便于解绑el._toggleHandler = onClick;});},unbind(el) {const titles = el.querySelectorAll('.el-submenu__title');titles.forEach(title => {title.removeEventListener('click', el._toggleHandler);});}
});

4. 实战要点与兼容性考量

触控设备与无障碍性

在没有鼠标悬停的场景下，点击触发的交互显著提升了触控设备的可用性。触控友好性、焦点可达性与 键盘导航需要与之配合，确保用户通过 Tab 键能聚焦到标题区域并用 Enter/Space 触发展开。

在实现过程中，请确保为聚焦状态提供清晰的可视化反馈，避免仅靠鼠标悬停来判断展开状态，从而提升无障碍体验。

性能与可维护性

通过直接操作 DOM 或添加自定义指令来改变交互，会带来对版本变动的敏感性。封装逻辑、良好的命名与注释、以及尽量使用现有事件与属性的组合，可以提升代码的可维护性与稳定性。

在大规模应用中，推荐将点击展开的逻辑封装成独立的组件或插件，确保可复用性并降低后续维护成本。