为什么引导下拉菜单不打开？答案

【问题标题】：Why does bootstrap dropdown don't open?为什么引导下拉菜单不打开？
【发布时间】：2020-08-05 17:44:45
【问题描述】：

我有一个使用 Bootstrap 4.3.1 设计的页面，上面有一个下拉菜单，但无法打开。我已经包含了 /bootstrap/4.3.1/css/bootstrap.min.css、/jquery/3.4.0/jquery.min.js 和 /bootstrap/4.3.1/js/bootstrap.bundle.min.js。

当我尝试打开下拉菜单时（即使是来自 https://getbootstrap.com/docs/4.3/components/dropdowns/ 的示例），我只会在控制台中收到以下错误：“InternalError: too much recursion”（在 Firefox 75.0 中）。在 Edge 中类似，只是错误的措辞是“SCRIPT28: Out of stack space”。

奇怪的事情 1：在几天之前它已经奏效了。我看不到任何东西，我已经改变了，这不再起作用了。

奇怪的事情 2：错误发生在文件 /bootstrap/node_modules/popper.js/dist/esm/popper.js 中，我没有名为 node_modules 的文件夹。

更奇怪的第三件事：当我复制页面源文本并将其保存为 html 文件时，一切正常。

我能做什么？

编辑：控制台说，错误出现在 popper.js:147:30 并且当我单击它时，我得到这一行 (if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX) ) {) 在函数 getScrollParent 中，它在 4 行之后被称为递归。

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

经过多次尝试，我找到了解决方案。

我用严格的 xhtml 编写我的页面：

<!DOCTYPE html>
<html lang='de-DE' xml:lang='de-DE' xmlns='http://www.w3.org/1999/xhtml'>

为了强制浏览器，用 xml 解释页面严格（所有标签都正确打开和关闭）我在 php 中发送这个标题：

header('Content-Type: application/xml; charset=utf-8');

当我删除这一行时，下拉菜单会起作用。

在我看来，这似乎是 Bootstrap 中的一个错误。有谁知道，我如何同时使用：Bootstrap 和 xhtml（不仅仅是写 xhtml 有效，还有浏览器将其解释为 xml）？可以在某处报告错误，或者有人可以为我执行此操作吗？

编辑：经过更多研究，我发现不同之处在于，节点名称在 html 中是大写，在 xml 中是小写。
https://developer.mozilla.org/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML

遗憾的是，来自 bootstrap 的团队不想兼容 xhtml。
https://github.com/twbs/bootstrap/issues/29235

我现在为自己在本地编辑了引导文件，以使其正常工作。我希望引导团队将来改变对这个话题的看法。

【讨论】：

【解决方案2】：

您是否尝试在 HTML 中包含 Popper JS 文件？

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

根据文档，下拉菜单、工具提示和弹出框需要它。

https://getbootstrap.com/docs/4.4/getting-started/introduction/#js

【讨论】：

第一次尝试使用 /bootstrap/4.3.1/js/bootstrap.min.js 我收到了缺少 popper.js 的消息。它适用于对 /bootstrap/4.3.1/js/bootstrap.bundle.min.js 的更改。如果缺少脚本，复制的源代码也应该不起作用。