Javascript 引导4下拉菜单不工作？

我复制了官方的Bootstrap4下拉菜单示例，但它不起作用，即没有任何内容被下拉

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="dropdown01">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

确保通过

---

或者下载并在本地链接编辑：如果其他人有这个问题，我相信OP的解决方案是他没有导入

popper.js

检查jQuery和所有相关的引导组件是否存在。还要检查控制台，确保没有错误

这是

popper.js

文件的问题。我在官方网站上发现，捆绑包文件本身包含popper，但不包含jquery。我通过添加这些文件的链接来修复它：

bootstrap.bundle.js

bootstrap.bundle.min.js

---

但是我删除了

popper.js

，因为它在bundle文件中。

尝试在文件末尾添加这些行

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

---

假设引导和Popper库是使用Nuget package manager安装的，对于使用Visual Studio的web应用程序，在母版页文件（Site.Master）中，正文标记开始的正下方，键入以下内容，包括对Popper.min.js的引用：

<script src="Scripts/umd/popper.min.js"></script>

以下是一张更好地显示位置的图像：

请注意，要添加的popper库的引用应该是umd文件夹内的引用，而不是脚本文件夹外的引用

---

这应该可以解决问题。

将此代码添加到jquery中

  $('.dropdown').click(function(){

       $('.dropdown-menu').toggleClass('show');

   });

---

我使用NuGet安装引导程序4。我也有问题，它没有显示下拉点击。根据Chrome控制台告诉我的，它在jquery中不断抛出错误

我最初有以下几点

<%-- CSS --%>
<link type="text/css" rel="stylesheet" href="/Content/bootstrap.css" />

 <%-- JS --%>
<script type="text/javascript" src="/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>

但是我把它改成使用捆绑版本，它开始工作了

<%-- CSS --%>
<link type="text/css" rel="stylesheet" href="/Content/bootstrap.css" />

<%-- JS --%>
<script type="text/javascript" src="/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.bundle.min.js"></script>

---

它需要是

/bootstrap.js

，而不是

/bootstrap.min.js

通过JavaScript 通过JavaScript调用下拉列表：

在bootstrap.min.js之后粘贴此代码

$（'.dropdown toggle'）.dropdown（）

另外，确保在bootstrap.min.js之前包含popper.min.js

多亏了Popper.js，下拉列表才得以定位（除非它们包含在导航栏中）。
按此顺序包含它们
这会奏效的
我不知道为什么：D

<!-- jQuery -->
<script src="js/jquery-3.4.1.min.js"></script>

<!-- Popper -->
<script src="js/popper.min.js"></script>

<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>

一个简单的答案是替换这一行：

<script type="text/javascript" src="your_directory/bootstrap.min.js"></script>



另一方面：

<script type="text/javascript" src="your_directory/bootstrap.bundle.min.js"></script>



我刚从他们的官方网站下载了jquery的最新版本，然后将其作为js文件添加到我的项目文件夹中，然后添加到我的HTML文件中。在这之后，它对我来说工作正常
您需要将脚本bootstrap.js或bootstrap.min.js排队。我在Bootstrap4.5.3中也遇到了同样的问题，当我将上面的一个脚本加入队列时，菜单工作正常。也可以是。
为我工作。。你是否正确地包含了lib？是的，我包含了bootstrap.css、jquery.js和bootstrap.js。你包含的bootstrap 4版本是什么（bootstrap.js、css）？bootstrap.css包括在内，其他组件都可以工作。你必须在调用bootstrap.js之前调用这些文件。你在谷歌搜索了很多次之后解决了我的问题。我缺少popper.js使用bootstrap4nuget包，我引用的是
Scripts/popper.js
，而不是
Scripts/umd/pooper.js
。前者在最后一行有一个
export
语句，它在Chrome中创建了一个错误。@moidol我也面临同样的问题，但只是在第一次单击时。我有angular 10项目，angular.json脚本标签看起来像
“scripts”：[“node_modules/jquery/dist/jquery.min.js”，“node_modules/bootstrap/dist/js/bootstrap.bundle.min.js”，“node_modules/bootstrap/dist/js/bootstrap.min.js”]
如果这是我的问题，你认为是网页造成的问题吗？是我遇到同样问题的分支机构。当我在VS中运行该站点时，似乎没有启用引导jquery功能，即使样式是这样的。只要单击任何下拉列表，您就可以在所有下拉列表上切换“show”类。如果单击事件绑定到了错误的元素，它应该在
上。下拉切换
。如果OP下载了bootstrap的缩小版本，该怎么办？保存了我的一天！！谢谢你