ElementUI菜单：点击展开而非悬停

本文介绍如何修改Element UI水平菜单(el-menu，mode="horizontal")的展开方式，将默认的鼠标悬停展开改为点击展开，以提升用户体验。文章提供了两种解决方案：一是直接使用`menu-trigger`属性将其值设置为`click`；二是通过CSS覆盖默认样式，实现点击展开的同时保留鼠标悬停高亮效果。两种方法各有优劣，读者可根据实际需求选择。 无论是初学者还是经验丰富的开发者，都能从本文中找到解决Element UI水平菜单展开问题的有效方法。

Element UI水平菜单展开方式修改：从悬停到点击

Element UI的el-menu组件在水平模式（mode="horizontal"）下，默认使用鼠标悬停（hover）展开子菜单。 许多开发者更倾向于点击（click）展开，以优化用户体验或匹配特定设计风格。本文提供两种解决方案。

问题描述：上图展示了默认的悬停展开行为，子菜单会在鼠标移至父菜单项时自动出现，离开后消失。 我们希望改为点击展开，或至少让子菜单在鼠标离开父菜单项后保持可见。

方案一：使用menu-trigger属性

Element UI 提供了 menu-trigger 属性来控制子菜单的展开方式，它接受 hover 和 click 两个值，默认值为 hover。 要将展开方式改为点击，只需将该属性设置为 click：

<el-menu :default-active="activeIndex" :menu-trigger="click" class="el-menu-demo" mode="horizontal">
  <!-- 菜单项 -->
</el-menu>

这将使所有子菜单都通过点击展开。

方案二：使用CSS覆盖默认样式

如果需要保留悬停效果（鼠标移入时高亮显示），但又不想让子菜单在鼠标离开后立即消失，则需要通过CSS覆盖Element UI的默认样式。 通过CSS选择器，精确定位需要修改的元素并调整其属性。 例如，可以修改子菜单的 display 属性使其始终可见，或修改 transition 属性调整动画效果。 具体的CSS代码需要根据实际样式进行调整。 以下是一个示例（需根据实际类名调整）：

.el-menu--horizontal > .el-menu-item:hover > .el-submenu__title {
  /* 调整样式，防止子菜单消失 */
}

通过以上两种方法，可以灵活控制Element UI el-menu 组件在水平模式下的子菜单展开方式，满足不同的设计需求。 需要注意的是，CSS覆盖方法需要根据具体的Element UI版本和自定义样式进行调整。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。