通过CDN捆绑包加载Bootstrap 4.5.3时：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
下面的下拉菜单效果很好：
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
<span>AAAA</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">BBBB</h6>
<a class="collapse-item" href="CCCC.html">CCCC</a>
<a class="collapse-item" href="DDDD.html">DDDD</a>
</div>
</div>
</li>
然而，当我试图通过CDN捆绑包将Bootstrap版本升级到5.0.0时：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
然后下拉列表将不再可单击。请问这是为什么？
仅供参考，我正在使用主题的干净安装https://startbootstrap.com/theme/sb-admin-2(GitHub上提供的源代码：https://github.com/startbootstrap/startbootstrap-sb-admin-2)，index.html。最初，它提到：
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
但我注意到了/bootstrap.bundle.min.js(4.5.3(的版本，如上所述，它通过Bootstrap 4.5.3 CDN捆绑包仍然可以正常工作。
也就是说，如果使用，一切都很好
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
除了最后一行之外，我没有对任何干净安装的文件进行任何其他更改(请参阅上面的GitHub存储库(，一切都在继续。
然后，随后，我所做的唯一改变，以某种方式破坏了下拉列表，是我将最后一行更改为以下内容(升级到Bootstrap 5.0.0(：
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
为什么这会破坏下拉链接？我可以使用什么工具对此进行故障排除？我在Firefox开发者控制台中没有看到任何错误。
Snippet(Bootstrap 4.5.3(
工作代码的完整片段(4.5.3(如下：
<!DOCTYPE html>
<head>
<!-- Standard Bootstrap CSS (4.3.1) via CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
<span>Components</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</li>
</ul>
<!-- End of Sidebar -->
<!-- JQuery (3.5.1) and Bootstrap (4.5.3) JS bundle via CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>如果您更改最后一行脚本，升级到Bootstrap 5.0.0，则折叠将不再工作：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
如果能帮助我进一步了解如何将此代码移植到Bootsrap 5，我们将不胜感激。我甚至需要JQuery吗？
Bootstrap 5不需要jQuery，但您仍然可以使用它。
如果您将代码与Collapse的文档进行比较，您可以看到Bootstrap 5的属性名称从data-toggle更改为data-bs-toggle。此外，锚点使用href属性来设置目标，而不是数据属性。如果你解决了这些问题，它就会起作用。
<!DOCTYPE html>
<head>
<!-- Standard Bootstrap CSS (5.0.0) via CDN-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
id="accordionSidebar">
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#collapseTwo"
data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseTwo">
<span>Components</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</li>
</ul>
<!-- End of Sidebar -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>