Element UI水平菜单：如何将鼠标悬停展开改为点击展开？

Element UI水平菜单：将鼠标悬停展开改为点击展开

Element UI的el-menu组件在水平模式（mode="horizontal"）下，默认以鼠标悬停触发子菜单展开。 本文介绍两种方法将展开方式修改为点击触发，以提升用户体验和控制精度。

方法一：使用menu-trigger属性

最直接的方法是利用el-menu组件的menu-trigger属性。该属性仅在mode="horizontal"时有效，可设置为'hover'或'click'。 将menu-trigger设置为'click'即可实现点击展开。

示例代码：

  <!-- 菜单项 -->

方法二：CSS样式覆盖

如果menu-trigger属性无法满足需求，或需要更精细的控制，则可通过CSS样式覆盖来修改默认行为。 这种方法允许开发者对菜单的显示位置、动画效果等进行更个性化的调整。 但需谨慎操作，避免影响其他组件样式。 具体CSS代码需要根据实际情况编写，此处不再赘述。 建议使用浏览器开发者工具检查el-menu组件的默认样式，并针对性地进行覆盖。

选择哪种方法取决于你的具体需求。 对于简单的修改，menu-trigger属性是更便捷的选择；而对于更复杂的定制化需求，CSS样式覆盖则提供了更大的灵活性。