Bootstrap下拉菜单点击触发按钮无法隐藏的解决方法

你的代码存在两个核心问题，导致交互异常：

• 重复引入Bootstrap JS资源：同时加载了bootstrap.min.js和bootstrap.bundle.min.js，后者已经包含Popper依赖和全部组件逻辑，重复加载会造成事件绑定重复、原生toggle逻辑失效
• 自定义逻辑与原生行为冲突：Bootstrap 5的Dropdown组件默认已经实现「点击按钮切换显隐、点击外部区域自动收起」的交互，你额外绑定的jQuery点击事件，判断类名的逻辑本身就错误（show类是加在.dropdown容器和.dropdown-menu上，而非触发按钮），且事件触发时序早于原生组件的展开动画执行，才会出现菜单还没完成渲染就被隐藏的问题。

第一步：修复JS引入错误 #

删掉重复的bootstrap.min.js引入，只保留bundle版本即可，修正后的资源引入部分：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- 仅保留bundle版本即可，已包含所有组件和依赖 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

第二步：移除无效的自定义jQuery监听代码 #

你写的$('.dropdown button').on('click', ...)逻辑完全不需要，直接删除即可。Bootstrap原生会通过按钮上的data-bs-toggle="dropdown"属性自动绑定切换显隐的逻辑，修复JS引入问题后，即可正常实现点击展开、再次点击收起的预期交互。

（可选）JS手动控制显隐的正确写法 #

如果后续需要通过代码手动操作下拉菜单状态，不要直接修改元素的hide/show属性或手动增删类名，使用Bootstrap官方提供的实例API，避免时序冲突：

// 初始化下拉组件实例
const dropdownTrigger = document.querySelector('.dropdown button')
const dropdownInstance = new bootstrap.Dropdown(dropdownTrigger)

// 切换显隐
dropdownInstance.toggle()
// 手动显示: dropdownInstance.show()
// 手动隐藏: dropdownInstance.hide()

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .dropdown {
      margin-left: 40%;
    }
    .dropdown-menu {
      transform: translate(calc(-50% + 20px), 40px) !important;
    }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  <div class="dropdown">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      <i class="fa-solid fa-bell"></i>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item">option 1</a></li>
      <li><a class="dropdown-item">option 2</a></li>
      <li><a class="dropdown-item">option 3</a></li>
    </ul>
  </div>
</body>
</html>

注意：使用Bootstrap原生组件时，尽量不要额外写DOM操作逻辑覆盖默认行为，优先使用官方提供的API，避免出现事件冲突、动画时序错乱的问题。

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