O01*_*123 1 javascript twitter-bootstrap dropdown bootstrap-4 bootstrap-5
通过 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>
但我注意到 (4.5.3) 的版本/bootstrap.bundle.min.js，它仍然可以通过 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 开发者控制台中没有看到任何错误。
完整的工作代码片段（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>
如果您更改最后一个脚本行以升级到 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>| 归档时间： |
|
| 查看次数： |
3725 次 |
| 最近记录： |