Bootstrap 5子菜单点击不向下展开，反而隐藏其他菜单项求助

问题根源 #

你的代码存在两个核心问题导致子菜单无法正常工作：

• 嵌套下拉缺少必要父容器类：Bootstrap 5要求嵌套下拉的父<li>必须添加dropdown（或dropend用于右侧展开）类，否则子菜单无法被正确定位和触发。
• CSS与JS版本不匹配：你引入的Bootstrap CSS是5.1.3版本，但JS是5.3.1版本，版本不一致可能引发组件行为异常。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 统一使用5.3.1版本的CSS -->
  <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
</head>

<body>
  <div class="dropdown border-top">
    <a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
      <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
    </a>
    <ul class="dropdown-menu dropdown-menu-end text-small shadow">
      <!-- 给父li添加dropdown类，识别为嵌套下拉容器 -->
      <li class="dropdown">
        <a class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" href="javascript:void(0)">SubMenu</a>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">Item 1</a></li>
        </ul>
      </li>
      <li><a class="dropdown-item" href="#">Settings</a></li>
      <li><a class="dropdown-item" href="#">Profile</a></li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
  </div>
  <!-- 保持JS版本与CSS一致 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>

</html>

关键修复点说明 #

• 添加父容器类：在包含子菜单的<li>上添加dropdown类，让Bootstrap识别这是嵌套下拉容器；若希望子菜单向右展开，可改用dropend类。
• 统一版本：将Bootstrap CSS和JS版本统一，避免版本差异引发的兼容性问题。
• 优化链接行为：将子菜单触发按钮的href="#"改为href="javascript:void(0)"，防止点击时页面跳转回顶部。
• 保留外部关闭逻辑：data-bs-auto-close="outside"属性确保仅点击菜单外部时才关闭，不影响子菜单展开交互。

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