如何在 Vue.js 中使用 Bootstrap 实现多级导航栏下拉菜单-js教程-PHP中文网

如何在 Vue.js 中使用 Bootstrap 实现多级导航栏下拉菜单

本文详解如何基于 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 关闭逻辑，实现真正稳定的多级导航。

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

✅ 推荐实现方案（兼容 Vue.js）

1. HTML 结构关键点

主菜单项使用 class="dropdown"（保持一级展开）
子级菜单项必须使用 class="dropend"（非 dropdown！），并嵌套在
内
所有下拉菜单统一使用
移除 data-bs-toggle="dropdown" 对子菜单的绑定（由 CSS hover 控制）

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;
}