为什么我的可折叠链接在 Bootstrap 5 中不可点击？

Question

通过 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 (source code available on 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 开发者控制台中没有看到任何错误。

片段（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 吗？

Answer 1

Bootstrap5个doesn't require jQuery，不过你还是可以用的

如果将代码与 the docs for 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>

为什么我的可折叠链接在 Bootstrap 5 中不可点击？

Why are my collapsible links not clickable in Bootstrap 5?

javascript

twitter-bootstrap

dropdown

bootstrap-4

bootstrap-5

片段（Bootstrap 4.5.3）