boostarp5导航条中下拉框不生效问题并报错

原创已于 2023-09-22 18:31:32 修改 · 605 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #html #js #前端框架

于 2023-09-18 09:36:09 首次发布

文章讲述了在Bootstrap5的boostarp5版本中，导航条下拉框点击无效并报错的问题，原因是boostarp.js未集成Popper.js。解决方案是替换为bootstrap.bundle.js，因为它包含了所需的Popper库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

boostarp5导航条中下拉框不生效问题并报错

Uncaught TypeError: Popper__namespace.createPopper is not a function
at Dropdown._createPopper (dropdown.js:241:27)
at Dropdown.show (dropdown.js:139:10)
at Dropdown.toggle (dropdown.js:121:49)
at HTMLAnchorElement. (dropdown.js:446:38)
at HTMLDocument.handler (event-handler.js:118:19)

问题描述：

在bootstarp中使用导航条时，下拉框点击不生效，并在控制台输出如下错误：
在这里插入图片描述
如果引入boostarp同我一样，使用的是这样的

<link href="/web03/pages/js/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css" rel="stylesheet"> <!--href为自己的路径 -->
<script src="/web03/pages/js/jquery-1.12.4.js"></script><!--src为自己的路径，jquery非必要，因为在boostarp5不依赖jquery了 -->
<script src="/web03/pages/js/bootstrap-5.3.0-alpha1-dist/js/bootstrap.js"></script>

将其中的boostarp.js更换为bootstrap.bundle.js如下（如果你下载的是boostarp5生产文件，那么在boostarp.js的同级目录下应该有此文件，其他引入方式可能需要自行尝试）

<link href="/web03/pages/js/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css" rel="stylesheet">
<script src="/web03/pages/js/jquery-1.12.4.js"></script>
<script src="/web03/pages/js/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js"></script>

应该就可以解决了

原因：

boostarp中某些组件需要使用Popper.js，但是在boostarp.js中没有集成，而boostarp.bundle.js中集成了popper.js库。
Popper.js 是一个 JavaScript 库，用于在 web 开发中实现弹出式框、下拉菜单、提示框和工具提示等 UI 组件的定位和定界。它可以帮助开发者更精确地控制这些 UI 组件的位置和行为，以便它们可以根据页面上的其他元素或触发事件进行动态定位。