解决 Bootstrap dropdown require Popper.js的问题

时间 2019-11-20

标签解决 bootstrap dropdown require popper.js popper 问题栏目 Bootstarp 繁體版

原文原文链接

今天在慕课网看Bootstrap中的下拉菜单，测试代码的时候遇到了JS实现的下拉菜单没法显示的问题，代码以下css

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="styles/Bootstraps/bootstrap.css">
</head>
<body>

 <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
        选择你喜欢的水果
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">苹果</a>
            <a role="menuitem" tabindex="-1" href="#">梨</a>
            <a role="menuitem" tabindex="-1" href="#">香蕉</a>
            <a role="menuitem" tabindex="-1" href="#">桃</a>
        </li>
    </ul>
</div>
<script src="scripts/jquery-3.3.1.js"></script>
<script src="scripts/Bootstraps/bootstrap.js"></script>
</body>
</html>

关于jquery和Bootstrap用了本地导入，也注意了先导入jq的顺序，并无发现问题，但下拉列表没法显示，使用浏览器的调试窗口查看，有如下报错html

查了一下，也没有见到相似问题的具体解释，不过勉强解决了问题，方法以下jquery

提示很明显，须要Popper.js,那么这是什么东西呢，来看一下git

### Popper.js

This is the engine, the library that computes and, optionally, applies the styles to
the poppers.

Some of the key points are:

- Position elements keeping them in their original DOM context (doesn't mess with your DOM!);
- Allows to export the computed informations to integrate with React and other view libraries;
- Supports Shadow DOM elements;
- Completely customizable thanks to the modifiers based structure;

Visit our [project page](https://fezvrasta.github.io/popper.js) to see a lot of examples of what you can do with Popper.js!

Find [the documentation here](/docs/_includes/popper-documentation.md).

这是从已经下载好的popper包下载下来的github

| Source |                                                                                  |
|:-------|:---------------------------------------------------------------------------------|
| npm    | `npm install popper.js --save`                                                   |
| yarn   | `yarn add popper.js`                                                             |
| NuGet  | `PM> Install-Package popper.js`                                                  |
| Bower  | `bower install popper.js --save`                     |
| unpkg  | [`https://unpkg.com/popper.js`](https://unpkg.com/popper.js)                     |
| cdnjs  | [`https://cdnjs.com/libraries/popper.js`](https://cdnjs.com/libraries/popper.js) |

推荐经过npm指令进行下载工程目录，以后在目录下找到Popper.js文件夹，能够看到里面的文件npm

这里就有一些问题了，如图有popper.js文件，esm和umd文件夹里也有popper.js文件，我并不理解这三个文件的用处以及区别，在别的博客上有人使用三个文件所有调用，能够解决，经尝试确实能够，但显然不合理。通过排除，咱们应当只调入umd文件夹中的popper.js文件，且一样须要在Bootstrap文件以前调入，经测试能够解决。bootstrap

但在bootstrap的文档中我只看到须要注意jq的引入，并无说起popper文件的调入，暂时也还不理解poppe包的用处，但愿能够随着学习逐渐解决这些问题浏览器