element ui侧边栏菜单:如何修改子菜单展开方式
Element UI 的 el-menu 组件在水平模式 (mode="horizontal") 下,默认情况下子菜单的展开方式是 hover(鼠标悬停)。 许多开发者希望将其修改为 click(点击)方式,以便更好地控制菜单的展开和收起。本文将针对这个问题,探讨如何将 el-menu 水平模式下的子菜单展开方式从 hover 修改为 click。
问题描述中,用户提供了一张图片,展示了 el-menu 水平菜单在 hover 状态下展开子菜单的情况,并希望将此行为修改为点击展开。 用户也提到,希望能够修改菜单的样式,使其在鼠标滑过时不自动展开子菜单。
解决方法:
Element UI 的 el-menu 组件提供了一个名为 menu-trigger 的属性,该属性可以控制子菜单的打开触发方式。 当 mode 属性设置为 horizontal 时,menu-trigger 属性生效,并接受 hover 或 click 两个值。 因此,要将子菜单的展开方式修改为点击,只需要将 menu-trigger 属性设置为 click 即可。 例如:
如果上述方法不能完全满足需求,或者需要对菜单的样式进行更精细的调整,可以使用 CSS 覆盖默认样式。 通过自定义 CSS 类,可以修改 el-menu 组件及其子元素的样式,从而实现自定义的菜单展开行为和视觉效果。 例如,可以针对 .el-menu-item 或 .el-submenu__title 等类名编写自定义 CSS 规则,来调整其 hover 和 click 状态下的样式。










