Bootstrap 4 下拉菜单不起作用？
[英]Bootstrap 4 Dropdown Menu not working?
问题描述
我复制了下拉菜单的官方 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>
14 个解决方案
解决方案1
78 已采纳 2017-09-03 19:15:12
编辑：如果其他人遇到这个问题，我相信 OP 的解决方案是他没有导入popper.js 。
检查 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> <-- Always remember to call the above files first before calling the bootstrap.min.js file --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html>
解决方案2
14 2018-03-01 20:37:54
尝试在文件末尾添加这些行
<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>
解决方案3
6 2019-01-30 05:36:01
将此代码添加到您的 jquery
$('.dropdown').click(function(){
$('.dropdown-menu').toggleClass('show');
});
解决方案4
4 2018-07-13 19:13:38
假设 Bootstrap 和 Popper 库是使用 Nuget 包管理器安装的，对于使用 Visual Studio 的 Web 应用程序，在母版页文件 (Site.Master) 中，正文标记开始的正下方，通过键入以下内容包括对 popper.min.js 的引用：
<script src="Scripts/umd/popper.min.js"></script>
这是一张可以更好地显示位置的图像：
请注意，要添加的 popper 库的引用应该是umd文件夹内的引用，而不是 Scripts 文件夹外的引用。
这应该可以解决问题。
解决方案5
3 2019-12-27 19:44:33
将它们包含在此订单中，这将起作用，我不知道为什么：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>
解决方案6
2 2018-02-25 12:43:32
这是popper.js文件的问题。 我在官方网站上发现的是捆绑文件本身包含 popper 但不包含 jquery。 我设法通过向这些文件添加链接来修复它：
bootstrap.bundle.js
bootstrap.bundle.min.js
但是我删除了popper.js因为它包含在包文件中。
解决方案7
1 2017-09-03 19:09:13
确保通过Bootstrap CDN包含 Bootstrap CSS 或下载它并在本地链接
解决方案8
1 2019-05-15 20:13:37
我使用 NuGet 来安装 BootStrap 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>
解决方案9
1 2019-10-29 19:15:20
通过 JavaScript 通过 JavaScript 调用下拉菜单：
在bootstrap.min.js之后粘贴这段代码
$('.dropdown-toggle').dropdown();
另外，请确保在bootstrap.min.js之前包含popper.min.js
下拉菜单的定位归功于 Popper.js（除非它们包含在导航栏中）。
解决方案10
0 2020-06-02 16:10:03
一个简单的答案是替换这一行：
<script type="text/javascript" src="your_directory/bootstrap.min.js"></script>
对于这个其他：
<script type="text/javascript" src="your_directory/bootstrap.bundle.min.js"></script>
解决方案11
0 2020-10-28 13:05:21
解决方案12
0 2020-12-28 19:05:14
您需要将脚本 bootstrap.js 或 bootstrap.min.js 加入队列。 我在使用 bootstrap 4.5.3 时遇到了同样的问题，并且当我将上述脚本之一加入队列时菜单工作。 它可以是。
解决方案13
0 2021-06-28 17:23:42
将这行代码添加到 body 标签的末尾
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
解决方案14
-3 2019-06-06 11:07:24
它需要是/bootstrap.js ，而不是/bootstrap.min.js 。
Bootstrap菜单中的下拉菜单不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.