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下拉切换时，我收到控制台错误

Uncaught TypeError: Cannot read property 'jquery' of undefined

jQuery在所有非popper引导功能和自定义jQuery javascript中正常工作。但是，当我在控制台中输入时，jquery（带有小写q）没有定义，但这是popperjs在2325行上使用的。如果我编辑popperjs源并将q大写，它仍然会抛出相同的错误。

Answer 1

您将某个无效的DOM元素传递给Popper.js，如果您将Popper.js更新为最新版本，您将收到更好的错误消息。

Answer 2

有关更多上下文，您将收到此错误，因为您尝试使用无效的HTML元素作为下拉按钮。我收到此错误，是因为我尝试使用带有按钮嵌套的锚标签以及.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>

与bootstrap4

2 个答案: