Javascript Bootstrap 4 下拉菜单不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46026899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Dropdown Menu not working?
提问by komodoedit
I copied the official Bootstrap 4 example for dropdown menus but it is not working, that is nothing is dropped down.
我复制了下拉菜单的官方 Bootstrap 4 示例，但它不起作用，即没有任何下拉菜单。
<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>
回答by moidol
Edit: In case anyone else is having this problem, I believe the solution for OP was that he had not imported popper.js.
编辑：如果其他人遇到这个问题，我相信 OP 的解决方案是他没有导入popper.js.
Check that jQuery and all the relevant Bootstrap components are there. Also check the console and make sure there are no errors.
检查 jQuery 和所有相关的 Bootstrap 组件是否存在。还要检查控制台并确保没有错误。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
</ul>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>回答by Mohsin Mahmood
try to add these lines at the end of the file
尝试在文件末尾添加这些行
<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>
回答by José Lugo
Assuming Bootstrap and Popper libraries were installed using Nuget package manager, for a web application using Visual Studio, in the Master page file (Site.Master), right below where body tag begins, include the reference to popper.min.js by typing:
假设 Bootstrap 和 Popper 库是使用 Nuget 包管理器安装的，对于使用 Visual Studio 的 Web 应用程序，在母版页文件 (Site.Master) 中，正文标记开始的正下方，通过键入以下内容包括对 popper.min.js 的引用：
<script src="Scripts/umd/popper.min.js"></script>
Here is an image to better display the location:
这是一张可以更好地显示位置的图像：
Notice the reference of the popper library to be added should be the one inside umdfolder and not the one outside on Scripts folder.
请注意，要添加的 popper 库的引用应该是umd文件夹内的引用，而不是 Scripts 文件夹外的引用。
This should fix the problem.
这应该可以解决问题。
回答by Dushyanth Kandiah
Add this code to your jquery
将此代码添加到您的 jquery
$('.dropdown').click(function(){
$('.dropdown-menu').toggleClass('show');
});
回答by Suleman
It's an issue with popper.jsfile. What I found at the official site was that bundle files include popper in itself but not jquery. I managed to fix it by adding link to these files:
是popper.js文件的问题。我在官方网站上发现的是捆绑文件本身包含 popper 但不包含 jquery。我设法通过向这些文件添加链接来修复它：
bootstrap.bundle.jsbootstrap.bundle.min.js
bootstrap.bundle.jsbootstrap.bundle.min.js
I removed popper.jshowever since it comes within the bundle file.
popper.js但是我删除了，因为它包含在包文件中。
回答by hamid sj
include them with this order this will work i dont know why :D
将它们包含在此订单中，这将起作用，我不知道为什么：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>
回答by ogbeh
Make sure to include the Bootstrap CSS either via the Bootstrap CDN or download it and link it locally
确保通过Bootstrap CDN包含 Bootstrap CSS 或下载它并在本地链接
回答by Red_Phoenix
I used NuGet to install BootStrap 4. I was also having issues with it not displaying the Dropdown on click. It kept throwing an error in jquery base on what the Chrome console was telling me.
我使用 NuGet 来安装 BootStrap 4。我也遇到了点击时不显示下拉菜单的问题。根据 Chrome 控制台告诉我的内容，它不断在 jquery 中抛出错误。
I originally had the following
我最初有以下内容
<%-- 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>
But I changed it to use the bundled version instead and it started to work
但是我将其更改为使用捆绑版本，并且它开始工作
<%-- 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>
回答by Tom Van de Velde
It needs to be /bootstrap.js, not/bootstrap.min.js.
必须是/bootstrap.js，不是/bootstrap.min.js。
回答by Pavel Pestov
Via JavaScript Call the dropdowns via JavaScript:
通过 JavaScript 通过 JavaScript 调用下拉菜单：
Paste this is code after bootstrap.min.js
在bootstrap.min.js之后粘贴这段代码
$('.dropdown-toggle').dropdown();
$('.dropdown-toggle').dropdown();
Also, make sure you include popper.min.jsbefore bootstrap.min.js
另外，请确保在bootstrap.min.js之前包含popper.min.js
Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
下拉菜单的定位归功于 Popper.js（除非它们包含在导航栏中）。
