解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题
最近小编在学习bootstrap，偶然碰到了一个小问题，bootstrap网站也没有做过多的解释，今天分享给大家。
问题描述：使用bootstrap的dropdown部件，打开网页后点击dropdown，报了如下错误：error：Bootstrap dropdown require Popper.js
bootstrap代码（只要是含dropdown部件的都可以啦）为：
<ul class="nav nav-tabs"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" aria-haspopup="true" aria-expanded="false">Animation</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a> </div> </li> </ul>
看错误提示，应该是要导入Popper.js文件，网上查了下方法，可以直接工程目录下使用npm安装：npm install --save popper.js
安装好后，我们可以在目录下找到node_modules文件夹，然后将popper.js文件引入html()。
保存好刷新网页再试了一下，发现还是不行，仍报了刚才的错误。于是我检查了一下node_modules->dist文件夹下的popper.js文件，发现有3个这样的文件（esm和umd文件夹下也各有一个popper.js文件）。再于是我把它们分别引入后再操作一下dropdown部件，最后在引入umd文件下的popper.js后^_^,bingo--终于是可以用了YY。虽然不知道为啥会这样，但也算是成功解决了问题。
最后贴上一个参考资料路径：https://github.com/twbs/bootstrap/issues/23381
总结
以上所述是小编给大家介绍的使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Typescrip异步函数Promise使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最近刚接触了uni-app,用于开发微信小程序,设计到了微信授权登录,下面这篇文章主要给大家介绍了关于uni-app中使用手机号一键登录的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析...2007-11-11
保证JavaScript和Asp、Php等后端程序间传值编码统一
在WEB开发过程中，前后端要求数据编码一致的处理是经常会碰到的！2009-04-04
文章从什么是闭包、以及闭包所涉及的作用域链说起，讲述了JavaScript垃圾回收机制、循环引用、循环引用和闭包、IE中的内存泄漏以及解决方法，是篇非常详尽，非常不错的文章，这里推荐给大家。2014-11-11
使用JavaScript判断一个元素是否在可视范围内的几种方法
在Web开发中,有时我们需要知道一个元素是否在用户的可视范围内,以便执行相应的操作,比如延迟加载图片、实现懒加载、或是触发动画效果, 本文将详细介绍使用 JavaScript 如何判断一个元素是否在可视范围内的几种方法,需要的朋友可以参考下2024-02-02
正则表达式在我们日程的工作项目中,应该是一个经常用到的技能,在做一些字符的匹配和处理的过程中,发挥了很大的作用,这篇文章主要给大家介绍了关于js正则表达式常用方法的相关资料,需要的朋友可以参考下2024-05-05
这篇文章主要为大家介绍了JavaScript实现微信小程序打卡时钟项目实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要介绍了JavaScript数据结构之二叉查找树的定义与表示方法,简单讲述了二叉查找树的概念、特点及javascript针对二叉查找树的创建、插入、遍历等操作相关实现技巧,需要的朋友可以参考下2017-04-04
本文给大家分享一个带有变形动画特效的下拉导航菜单特效，该导航菜单在菜单项之间切换时，下拉菜单会快速的根据菜单内容的大小来动态变形，显示合适的下拉菜单大小，效果非常棒。对导航下拉菜单代码感兴趣的朋友可以参考下本文2016-11-11
最新评论