Bootstrap 4下拉菜单不起作用？

Posted 2023-03-05

技术标签:

【中文标题】Bootstrap 4下拉菜单不起作用？【英文标题】：Bootstrap 4 Dropdown Menu not working? 【发布时间】：2018-02-12 02:13:13 【问题描述】：

我复制了下拉菜单的官方 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>

【问题讨论】：

为我工作jsbin.com/bumeqopuwu/edit?html,output .. 你是否正确包含了库？是的，我包括 bootstrap.css、jquery.js 和 bootstrap.js 你包含什么 bootstrap 4 版本（bootstrap.js、css）？ 【参考方案1】：

将这行代码添加到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>

【讨论】：

这个解决方案对我有用，谢谢。【参考方案2】：

您需要将脚本 bootstrap.js 或 bootstrap.min.js 排入队列。我在 bootstrap 4.5.3 中遇到了同样的问题，当我将上述脚本之一排入队列时，菜单工作了。两者都可以。

【讨论】：

【参考方案3】：

This is my solution

我刚刚从他们的官方website 下载了 jquery 的最新版本，然后将其作为 js 文件添加到我的项目文件夹中，然后添加到我的 HTML 文件中。之后它对我来说工作正常

【讨论】：

【参考方案4】：

编辑：如果其他人遇到这个问题，我相信 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>

【讨论】：

使用 Bootstrap 4 nuget 包，我引用了 Scripts/popper.js 而不是 Scripts/umd/poopper.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"             ]

【参考方案5】：

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

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

对于这个别人：

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

【讨论】：

【参考方案6】：

将它们包含在此订单中这会起作用我不知道为什么：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>

【讨论】：

【参考方案7】：

通过 JavaScript 通过 JavaScript 调用下拉菜单：

在bootstrap.min.js

之后粘贴这是代码

$('.dropdown-toggle').dropdown();

另外，请确保在 bootstrap.min.js

之前包含 popper.min.js

借助 Popper.js 定位下拉菜单（除非它们包含在导航栏中）。

【讨论】：

感谢您的回答，这最终对我有用 - 我不得不手动开始调用 $.dropdown()【参考方案8】：

必须是/bootstrap.js，不是 /bootstrap.min.js。

【讨论】：

如果 OP 下载了 bootstrap 的缩小版怎么办？【参考方案9】：

我使用 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>

【讨论】：

拯救了我的一天！！谢谢你【参考方案10】：

将此代码添加到您的 jquery

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

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

   );

【讨论】：

这种方法有很多问题。只要单击任何下拉菜单，您就可以在所有下拉菜单上切换“显示”类。而你的点击事件绑定到了错误的元素，它应该在.dropdown-toggle。【参考方案11】：

假设 Bootstrap 和 Popper 库是使用 Nuget 包管理器安装的，对于使用 Visual Studio 的 Web 应用程序，在主页面文件 (Site.Master) 中的正文标记开始的正下方，包括对 popper.min.js 的引用通过输入：

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

这里有一张图片可以更好地显示位置：

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

这应该可以解决问题。

【讨论】：

【参考方案12】：

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

<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>

【讨论】：

如果这是我的问题，你认为是 webpack 造成的吗？ This 是我遇到同样问题的分支。似乎当我在 VS 中运行该站点时，即使样式是，也没有启用引导 jquery 功能。【参考方案13】：

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

bootstrap.bundle.jsbootstrap.bundle.min.js

我删除了popper.js，因为它包含在捆绑文件中。

【讨论】：

您必须在调用 bootstrap.js 之前调用这些文件。经过多次谷歌搜索，您解决了我的问题。我错过了 popper.js【参考方案14】：

确保通过 Bootstrap CDN 包含 Bootstrap CSS 或者下载并链接到本地

【讨论】：

bootstrap.css 包含在内，其他组件正常工作。

以上是关于Bootstrap 4下拉菜单不起作用？的主要内容，如果未能解决你的问题，请参考以下文章

为啥侧边栏下拉菜单不起作用 bootstrap 3