【问题标题】：Why are my collapsible links not clickable in Bootstrap 5? [duplicate]为什么我的可折叠链接在 Bootstrap 5 中不可点击？ [复制]
【发布时间】：2020-12-24 15:09:29
【问题描述】：

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

代码段（引导 4.5.3）

工作代码（4.5.3）的完整sn-p如下：

    <!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 吗？

【问题讨论】：

标签： javascript twitter-bootstrap bootstrap-4 dropdown bootstrap-5

【解决方案1】：

Bootstrap 5 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>

【讨论】：