本文详解如何基于 bootstrap 5 + vue.js 构建稳定、可交互的多级（三级及以上）navbar 下拉菜单，解决点击子菜单时父级自动收起的问题，并提供纯 css 悬停展开方案与响应式适配要点。
本文详解如何基于 bootstrap 5 + vue.js 构建稳定、可交互的多级（三级及以上）navbar 下拉菜单，解决点击子菜单时父级自动收起的问题，并提供纯 css 悬停展开方案与响应式适配要点。
Bootstrap 5 原生仅支持单层下拉（.dropdown），其 data-bs-toggle="dropdown" 依赖 JavaScript 的 click 事件监听器，而默认行为会在点击任意下拉项（包括子菜单触发器）时关闭所有已展开的 dropdown——这正是你遇到“点击 More Services 后主菜单关闭”的根本原因。
✅ 正确解法：改用 dropend（右向二级菜单）+ CSS 悬停展开（hover-based），绕过 Bootstrap 的 JS 关闭逻辑，实现真正稳定的多级导航。
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
✅ 推荐实现方案（兼容 Vue.js）
1. HTML 结构关键点
- 主菜单项使用 class="dropdown"（保持一级展开）
- 子级菜单项必须使用 class="dropend"（非 dropdown！），并嵌套在
- 所有下拉菜单统一使用
- 移除 data-bs-toggle="dropdown" 对子菜单的绑定（由 CSS hover 控制）
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
Services
</a>
<ul class="dropdown-menu">
<li><router-link to="/service1" class="dropdown-item">Service 1</router-link></li>
<li><router-link to="/service2" class="dropdown-item">Service 2</router-link></li>
<!-- ✅ 二级菜单：使用 dropend + hover -->
<li class="nav-item dropend">
<a class="nav-link dropdown-toggle" href="#" role="button">
More Services
</a>
<ul class="dropdown-menu">
<li><router-link to="/service3" class="dropdown-item">Service 3</router-link></li>
<li><router-link to="/service4" class="dropdown-item">Service 4</router-link></li>
</ul>
</li>
</ul>
</li>2. 必备 CSS（支持悬停展开 & 响应式定位）
/* 禁用默认 JS 触发的下拉显示，改用 hover */
.dropdown .dropdown-menu,
.dropend .dropdown-menu {
display: none;
}
/* 桌面端：悬停展开 */
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
display: block;
margin-top: 0.125em;
margin-left: 0.125em;
}
/* dropend 二级菜单：右侧绝对定位 */
@media (min-width: 769px) {
.dropend:hover > .dropdown-menu {
position: absolute;
top: 0;
left: 100%;
min-width: 180px; /* 防止过窄 */
}
}
/* 可选：增强用户体验 */
.dropdown-item:hover {
background-color: #ff9e80;
color: white;
}
.navbar-nav .nav-link {
color: #fff;
}3. Vue.js 注意事项
- ✅ router-link 可直接替代 ，无需额外处理（Bootstrap 5 兼容）
- ⚠️ 避免在子菜单中重复添加 data-bs-toggle="dropdown" —— 它会干扰 hover 行为并触发关闭
- ? 移动端（
✅ 最终效果优势
- 主菜单与子菜单可同时保持展开状态
- 支持无限嵌套（三级、四级…只需连续套用 dropend + dropdown-menu）
- 无 JS 冲突，完美兼容 Vue 的响应式渲染与路由跳转
- 保留 Bootstrap 5 原生样式与无障碍属性（aria-haspopup, aria-expanded）
? 提示：若需移动端也支持点击展开（非 hover），可引入轻量插件如 bootstrap-multilevel-dropdown，但本方案以零依赖、高可控性为优先。
