Bootstrap 5下拉菜单无法收回，寻求技术解决方案

故障原因 #

• Bootstrap JS重复加载：页面<head>和<body>底部分别加载了bootstrap.min.js，重复加载会导致下拉组件的事件监听器被多次绑定，折叠逻辑出现冲突，无法正常触发收回动作。
• Popper.js加载顺序错误：Bootstrap 5的下拉组件依赖Popper.js进行定位，必须在Bootstrap JS之前加载Popper.js，原代码中先加载Bootstrap再加载Popper，导致Popper未被正确初始化，影响下拉菜单的交互逻辑。
• 冗余jQuery引入：Bootstrap 5已完全移除对jQuery的依赖，额外引入jQuery可能与Bootstrap的原生JS产生冲突，干扰组件正常工作。

解决办法 #

按照以下步骤修正代码：

1. 删除<head>中的bootstrap.min.js引用
2. 调整Popper.js的加载顺序，确保在Bootstrap JS之前加载
3. 移除不必要的jQuery引用

修正后的完整代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Admin Dashboard</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown dropdown-center">
      <button class="btn btn-outline dropdown-toggle rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">  Order Status </button>
        <ul class="dropdown-menu">
           <li><a class="dropdown-item active" href="#">In Stock</a></li>
           <li><a class="dropdown-item" href="#">Cancelled</a></li>
           <li><a class="dropdown-item" href="#">Delivered</a></li>
           <li><a class="dropdown-item" href="#">Progress</a></li>
       </ul>
 </div>

  <script src="https://unpkg.com/@popperjs/core@2"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

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