Vue.js+Bootstrap多级导航下拉问题：点击子项关闭父级下拉菜单

问题根源 #

Bootstrap默认下拉菜单的逻辑是：点击菜单内任何元素都会触发父级菜单关闭，这是因为事件冒泡会传递到父级dropdown组件，同时默认的data-bs-auto-close配置会在点击菜单内部时执行关闭操作。

具体修复步骤 #

1. 配置父级下拉的自动关闭规则 #

给一级下拉的<a>标签加上data-bs-auto-close="outside"，设置只有点击菜单外部区域时才关闭父级下拉，内部操作不会触发关闭。

2. 阻止子级下拉触发器的事件冒泡 #

在二级下拉的触发器<a>标签上添加Vue的@click.stop指令，切断点击事件向上传递的路径，避免父级dropdown接收到事件后关闭。

3. 修正菜单布局避免子菜单被截断 #

给父级的dropdown-menu加上position-static类，确保子级下拉菜单能正常显示在父菜单外侧，不会被容器截断。

修改后的完整代码 #

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <div class="navbar-brand mb-0 h1">กำหนดมาตรฐานบุคลากรทั่วไป</div>
  </div>

  <button
    class="navbar-toggler"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbarNav"
    aria-controls="navbarNav"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <router-link to="/home" class="nav-link">Home</router-link>
      </li>

      <!-- 一级下拉菜单 -->
      <li class="nav-item dropdown">
        <a
          class="nav-link dropdown-toggle"
          href="#"
          id="navbarDropdown"
          role="button"
          data-bs-toggle="dropdown"
          data-bs-auto-close="outside"
          aria-haspopup="true"
          aria-expanded="false"
        >
          Services
        </a>
        <div class="dropdown-menu position-static" aria-labelledby="navbarDropdown">
          <router-link to="/service1" class="dropdown-item">Service 1</router-link>
          <router-link to="/service2" class="dropdown-item">Service 2</router-link>

          <!-- 二级下拉菜单 -->
          <li class="nav-item dropdown">
            <a
              class="dropdown-item dropdown-toggle"
              href="#"
              id="nestedDropdown"
              role="button"
              data-bs-toggle="dropdown"
              @click.stop
              aria-haspopup="true"
              aria-expanded="false"
            >
              More Services
            </a>
            <div class="dropdown-menu" aria-labelledby="nestedDropdown">
              <router-link to="/service3" class="dropdown-item">Service 3</router-link>
              <router-link to="/service4" class="dropdown-item">Service 4</router-link>
            </div>
          </li>
        </div>
      </li>
    </ul>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者nongtan