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

Question

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

Uncaught TypeError: t.createPopper is not a function

这是我的 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>

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

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

Answer 1

问题出在 popper 版本上。我不知道他们做了什么，但是使用最新版本的 popper，下拉菜单不再起作用。

我使用版本 1.14.3 使其在这个 fiddle 中工作：https://jsfiddle.net/e5n1astx/

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

我在上面使用的代码。 Link 到我使用的 popper 版本：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js

Answer 2

您的代码可以使用，但可能 Bootstrap 或 Popper 库未完成.. 使用 CDN 而不是离线库

Bootstrap的官方文档:: https://getbootstrap.com/docs/5.0/getting-started/introduction/

JS Fiddle 与 CDN :: https://jsfiddle.net/9jbswr6d/1/

<html>
<head>
<!--official Bootstrap 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>
<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.0.0- 
beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384- 
ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" 
crossorigin="anonymous"></script> 
</body>
</html>

Answer 3

有必要将 popper js 导入到您的代码中。关注 link: https://popper.js.org/ 之后就可以正常工作了

<script src="https://unpkg.com/@popperjs/core@2"></script>

Answer 4

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

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

这解决了我的问题。希望这对某人有所帮助。

Answer 5

这救了我：

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<div class="dropdown">
   <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropdown button
   </button>
   <div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>   
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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

Uncaught TypeError when creating a dropdown button in Bootstrap 5

html

css

twitter-bootstrap

bootstrap-5