在 Bootstrap 5 中创建下拉按钮时未捕获的类型错误

Question

在 Bootstrap 5 中创建下拉按钮时未捕获的类型错误

Ram*_*med 2 html css twitter-bootstrap bootstrap-5

我正在尝试使用 Bootstrap 5 创建下拉按钮，但出现错误：

未捕获的类型错误：t.createPopper 不是函数

这是我的 HTML 代码：

<div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
    </a>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

这些是我正在使用的脚本：

<script src="assets/scripts/vendors/jquery-3.5.1.min.js"></script>
<script src="assets/scripts/vendors/popper.min.js"></script>
<script src="assets/scripts/vendors/bootstrap.min.js"></script>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 6

您可以使用bootstrap.bundle.min.js或bootstrap.bundle.js作为包含 Popper 的离线库。前任：-

<script src="src/jquery-ui.min.js"></script>
<script src="src/bootstrap.bundle.min.js"></script>

Run Code Online (Sandbox Code Playgroud)

这解决了我的问题。希望这可以帮助某人。

Answer 2

Kev*_*our 5

您的代码可以工作，但 Bootstrap 或 Popper 库可能不完整，请尝试使用 CDN 而不是离线库。

Bootstrap 的官方文档。

<html>
   <head>
      <!--official Bootstrap CDN-->
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

   </head>
   <body>
      <div class="dropdown">
         <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
         Dropdown link
         </a>
         <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
         </ul>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   </body>
</html>

Run Code Online (Sandbox Code Playgroud)

世界已经改变，请在 owasp.org 中阅读。几乎每个高科技公司都强烈建议不要使用 CDN 链接（仅用于测试/1 分钟编码示例，但绝不用于生产），因为它不安全。链接：https://cheatsheetseries.owasp.org/cheatsheets/Third_Party_Javascript_Management_Cheat_Sheet.html。也许 bootstrap 是您“可能”信任的东西。但即使有“完整性”，他们的代码也可能会改变以收集信息或您不想要的东西。我只是把它写下来——供其他人了解和考虑。不是专门针对你的答案 - 这就是为什么我没有降级它。 (5认同)

归档时间：	5 年前
查看次数：	6074 次
最近记录：	4 年，5 月前