崩溃时的引导NavBar无法打开
[英]Bootstrap NavBar on collapse won't open
问题描述
我有以下代码。
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </nav> <h1>Home</h1> </div> </body> </html>
现在，当导航栏折叠时，当我按下汉堡包图标时，它根本不会打开。 只是卡住了，当窗口变小时，我无法打开导航栏。
我尝试添加不同的CSS和JS链接，但这无济于事。 请帮忙！ 谢谢大卫。
（请运行该代码段-问题很简单，就是汉堡包图标仍然停留在屏幕上-如您所见！）
2 个解决方案
解决方案1
4 已采纳 2015-12-06 21:52:31
您必须在头部的Bootstrap之前加载Jquery。
解决方案2
2 2015-12-06 21:59:51
如果您检查控制台，则会看到错误消息：
Uncaught Error: Bootstrap's JavaScript requires jQuery
这是因为您先加载bootstrap.min.js ，然后再加载jquery.min.js 。
Bootstrap的JavaScript需要jQuery ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Bootstrap toggle-collapse展开我的导航栏菜单，但不会折叠它
[英]Bootstrap toggle-collapse expands my navbar menu but won't collapse it
Bootstrap 3导航栏不会切换（已检查现有解决方案，在单击时仍不会切换折叠）
[英]Bootstrap 3 Navbar won't toggle (have checked existing solutions, still won't toggle collapse when clicked on)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.