下拉菜单在导航栏中无法按预期工作
Posted
技术标签:
【中文标题】下拉菜单在导航栏中无法按预期工作【英文标题】：Dropdown menus not working as expected in navbar 【发布时间】：2018-07-04 10:01:33 【问题描述】：我网站上的下拉菜单只是拒绝工作，我不明白为什么。我浏览了这个站点和其他站点，并重新阅读了引导文档，但我只是不知道为什么它不起作用。他们不会下拉。我知道它们被单击了，因为当我单击它们时，URL 中会出现井号，但不会出现拖放动画。
下面是我的代码，带有头部和导航栏。
其他人能看出什么问题吗？
<head>
<title>Scott's Website</title>
<link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<script type="text/javascript" src="styles/bootstrap/css/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="styles/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid bg-dark">
<div class="container bg-dark">
<div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
<div class="col-9">
<h1>Scott McMullan</h1>
<div class="row pt-0 pb-0 pl-0 pr-3 bg-dark text-light">
<div class="col-9">
<h7 class="font-weight-light">Studying full time at Griffith University.</h7>
</div>
</div>
<div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
<div class="col">
<h7 class="font-weight-light">Working towards a bachelor of Computer Science, majoring in Data Science & Artificial Intelligence.</h7>
</div>
</div>
<hr/>
<div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">
<img src="icon.jpg" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Experience
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Academic</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Academic Course Breakdown</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Projects
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Academic</a>
<a class="dropdown-item" href="#">Personal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
【问题讨论】：
【参考方案1】：您的下拉菜单不起作用的原因是您没有加载 popper.js。所有弹出和下拉的内容都需要该文件。
此外，保持 HTML 尽可能有效总是一个好主意（您在此处发布的代码无效）。并且推荐在底部加载 js 文件（而不是在头部加载）。
这是工作代码（单击“运行代码 sn-p”按钮并展开到全屏以验证它是否正常工作）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid bg-dark">
<div class="container bg-dark">
<div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
<div class="col-9">
<h1>Scott McMullan</h1>
<div class="row pt-0 pb-0 pl-0 pr-3 bg-dark text-light">
<div class="col-9">
<h7 class="font-weight-light">Studying full time at Griffith University.</h7>
</div>
</div>
<div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
<div class="col">
<h7 class="font-weight-light">Working towards a bachelor of Computer Science, majoring in Data Science & Artificial Intelligence.</h7>
</div>
</div>
<hr/>
<div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">
<img src="https://placehold.it/60" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Experience
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Academic</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Academic Course Breakdown</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Projects
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Academic</a>
<a class="dropdown-item" href="#">Personal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<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>【讨论】：
【参考方案2】：其他人说的不是真的，我是从本地文件加载 popper.js。然而，没有加载的是 jquery 文件，因为我在本地拥有一切。
修复很简单，从 https://code.jquery.com/jquery-3.3.1.min.js 下载 jquery 源并将其与我的 HTML 本地链接。
【讨论】：
【参考方案3】：看来您必须再次阅读引导文档： https://getbootstrap.com/docs/4.0/getting-started/introduction/
您使用的 Bootstrap 下拉菜单需要 popper.js 可在简介处找到 快速入门 > JS
Bootstrap 文档非常丰富。通常那里没问题;)
【讨论】：
我明白了，谢谢。为什么我下载的文件中没有？我在本地 PC 上有引导程序。 由于我没有打包它，我不确定，但我会说这些是可选的，第三方依赖项不是由引导团队管理的。你会找到源代码不过可以通过快速网络搜索下载。【参考方案4】：嗯，我自己学到了一些新东西： PopperJS 实际上与 bootstrap-4 捆绑在一起。它只是隐藏在 bootstrap.bundle.js 中
不过，您必须将其包括在内。 正如我在上一个回答中所说： 这一切都在文档中！
https://getbootstrap.com/docs/4.0/components/dropdowns/
【讨论】：
对不起，你这么无赖，但你说你自己读过文档。既然它就在那里，我认为没有必要重新发明***。 我在源代码中包含了<script type="text/javascript" src="styles/bootstrap/js/bootstrap/bootstrap.bundle.js"></script>，但这仍然没有帮助。以上是关于下拉菜单在导航栏中无法按预期工作的主要内容，如果未能解决你的问题，请参考以下文章
如何在折叠的导航栏中默认打开 Bootstrap 3 下拉菜单