引入Bootstrap 5与jQuery 3.6后下拉按钮无法工作，代码缺少什么配置？

问题原因 #

1. JS引入顺序错误
   jQuery作为Bootstrap的可选依赖，必须放在Bootstrap JS文件之前引入，你当前的引入顺序是Bootstrap JS在前、jQuery在后，会导致Bootstrap的jQuery适配逻辑无法正常初始化。
2. 缺少Popper.js依赖
   Bootstrap 5的下拉、弹出提示、模态框等带定位的交互组件，依赖Popper.js实现元素定位计算，如果你使用的是未内置Popper的标准版bootstrap.min.js，没有额外引入Popper.js就会导致下拉交互无法触发。

修正方案 #

推荐更简单的方案：使用Bootstrap 5内置Popper的打包版本，调整引入顺序即可：
将你body末尾的script代码替换为以下内容：

<!-- 优先引入jQuery -->
<script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
<!-- 引入内置Popper的Bootstrap 打包JS文件 -->
<script type="text/javascript" src="./bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>

如果你坚持使用标准版bootstrap.min.js，则需要按顺序引入jQuery、Popper.js、Bootstrap JS三个文件。
如果你项目中没有其他需要用到jQuery的逻辑，也可以直接移除jQuery的引入，仅引入bootstrap.bundle.min.js即可正常触发Bootstrap 5的所有原生交互。

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