引导4下拉菜单不工作？ [英] Bootstrap 4 Dropdown Menu not working?
本文介绍了引导4下拉菜单不工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我拷贝了官方的Bootstrap 4下拉菜单的例子，但它不起作用，没有什么东西掉下来。
< li class =nav-item dropdown>
< a class =nav-link dropdown-togglehref =＃id =dropdown01data-toggle =dropdownaria-haspopup =truearia-expanded =false>下拉< / A>
< div class =dropdown-menuaria-labelledby =dropdown01>
< a class =dropdown-itemhref =＃>动作< / a>
< a class =dropdown-itemhref =＃>另一个动作< / a>
< a class =dropdown-itemhref =＃>其他东西在这里< / a>
< / div>
< / li>
解决方案
编辑：如果有其他人遇到此问题，我相信OP的解决方案是他没有导入 popper.js 。
检查jQuery和所有相关的Bootstrap组件在那里。请检查控制台并确保没有错误。
<！ DOCTYPE html>< html lang =en>< head> <！ - 必需的元标记 - > < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1，shrink-to-fit = no> <！ - Bootstrap CSS - > < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.cssintegrity =sha384- / Y6pD6FV / Vv2HJnA6t + vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6Mcrossorigin = 匿名 >< /头><身体GT; < nav class =navbar navbar-expand-lg navbar-light bg-light> < a class =navbar-brandhref =＃> Navbar< / a> < button class =navbar-togglertype =buttondata-toggle =collapsedata-target =＃navbarNavDropdownaria-controls =navbarNavDropdownaria-expanded =falsearia-label =Toggle导航> < span class =navbar-toggler-icon>< / span> < /按钮> < div class =collapse navbar-collapseid =navbarNavDropdown> < ul class =navbar-nav> < li class =nav-item active> < a class =nav-linkhref =＃>主页< span class =sr-only>（current）< / span>< / a> < /锂> < li class =nav-item> < a class =nav-linkhref =＃>功能< / a> < /锂> < li class =nav-item> < a class =nav-linkhref =＃>定价< / a> < /锂> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =http://example.comid =navbarDropdownMenuLinkdata-toggle =dropdownaria-haspopup =truearia-expanded =false >下拉式连结< / a> < div class =dropdown-menuaria-labelledby =navbarDropdownMenuLink> < a class =dropdown-itemhref =＃>动作< / a> < a class =dropdown-itemhref =＃>另一个动作< / a> < a class =dropdown-itemhref =＃>此处还有其他内容< / a> < / DIV> < /锂> < / UL> < / DIV> < / NAV> <！ - 可选JavaScript - > <！ - 首先是jQuery，然后是Popper.js，然后是Bootstrap JS - > < script src =https://code.jquery.com/jquery-3.2.1.slim.min.jsintegrity =sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkNcrossorigin =anonymous>< /脚本> < script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.jsintegrity =sha384-b / U6ypiBEHpOf / 4 + 1nzFpr53nxSS + GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4 crossorigin =anonymous>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.jsintegrity =sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1crossorigin =anonymous>< / script> ;< / body>< / html>
I copied the official Bootstrap 4 example for dropdown menus but it is not working, that is nothing is dropped down.
<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>
解决方案
Edit: In case anyone else is having this problem, I believe the solution for OP was that he had not imported popper.js.
Check that jQuery and all the relevant Bootstrap components are there. Also check the console and make sure there are no errors.
<!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>
这篇关于引导4下拉菜单不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
