Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org)（下拉菜单）

慕斯-ing

已于 2022-09-07 16:39:24 修改

阅读量685

点赞数 1

分类专栏： BootStrap 文章标签： bootstrap javascript 前端

于 2022-08-29 09:56:44 首次发布

本文链接：https://blog.csdn.net/blbyu/article/details/126543064

版权

BootStrap 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

报错内容：
在做网页设计的时候，使用Bootstrap框架的下拉菜单，在谷歌浏览器中打开html进行测试的时候发现点击下拉菜单无反应的问题，打开F12，报错内容如下所示：
在这里插入图片描述

前端代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mydemo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div style="margin: 10px;height: 100px">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            阶层
        </button>
        <div class="dropdown-toggle">
            <a href="#" class="dropdown-item">土豪</a>
            <a href="#" class="dropdown-item">中产</a>
            <a href="#" class="dropdown-item">无产</a>
            <div class="dropdown-driver"></div>
            <a href="www.baidu.com" class="dropdown-item">乞丐</a>
        </div>
    </div>
</body>
</html>

解决办法：
引入popper.js

<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>

解决成功后的下拉菜单如下：
在这里插入图片描述

注意事项：
经测试发现引入的必须在引入bootstrap.min.css等之前才可以，不然依然无法正常引入使用。

慕斯-ing

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org)（下拉菜单）

Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org)（下拉菜单）
复制链接

扫一扫