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 即可。 例如：
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :menu-trigger="click"> <!-- 菜单项 --> </el-menu>
如果上述方法不能完全满足需求，或者需要对菜单的样式进行更精细的调整，可以使用 CSS 覆盖默认样式。 通过自定义 CSS 类，可以修改 el-menu 组件及其子元素的样式，从而实现自定义的菜单展开行为和视觉效果。 例如，可以针对 .el-menu-item 或 .el-submenu__title 等类名编写自定义 CSS 规则，来调整其 hover 和 click 状态下的样式。
以上就是Element UI水平菜单：如何将子菜单展开方式由hover改为click？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
236
