javascript - 与 bootstrap4 一起使用时，jquery 未定义 popperjs 第 2325 行

Question

我正在使用 bootstrap 4.0 beta，它需要 popperjs，即 v1.12.5 。 jQuery 版本为 3.2.1，采用 jQuery.noConflict() 模式。这是针对 Shopify 主题的，因此要包含 javascript 文件，它在 Shopify 的 Slate 命令行工具中使用 gulp-include 指令。我的包含文件如下所示:

// =require vendor/jquery-3.2.1.js
// =require vendor/popper.js
// =require vendor/bootstrap.min.js

当我尝试使用 Bootstrap Navbar 下拉菜单切换时，出现控制台错误

未捕获类型错误:无法读取未定义的属性“jquery”

jQuery 在所有非 popper Bootstrap 功能和自定义 jQuery javascript 中都能正常工作。但是，当我在控制台中键入 jquery(带有小写 q)时，它并未定义，但这就是 popperjs 在第 2325 行使用的内容。如果我编辑 popperjs 源代码并将 q 大写，它仍然会引发相同的错误。

Answer 1

有关更多上下文，您收到此错误是因为您尝试使用无效的 HTML 元素作为下拉按钮。我收到此错误是因为我尝试使用 anchor 标记，该标记在 .dropdown-menu div 旁边嵌套了一个按钮

例如 这有效

<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Thing 1</a>
    <a class="dropdown-item" href="#">Thing 2</a>
    <a class="dropdown-item" href="#">Thing 3</a>
  </div>

但这并不

<a class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Thing 1</a>
    <a class="dropdown-item" href="#">Thing 2</a>
    <a class="dropdown-item" href="#">Thing 3</a>
  </div>
</a>