Bootstrap 导航栏折叠按钮不起作用
[英]Bootstrap navbar-collapse button not working
问题描述
I know this has been asked thousands of time and I've been looking at some of the similar questions for about and an hour now.
我知道这已经被问过数千次了，我已经研究了一些类似的问题大约一个小时了。
I can't figure out whats the problem in my code and no matter what solution I try it doesn't works.我无法弄清楚我的代码中的问题是什么，无论我尝试什么解决方案都行不通。
Here is the navbar snippet in my project (derived from the bootstrap docs):这是我项目中的navbar片段（源自引导程序文档）：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale = 1">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target"#rtNavbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I'm using bootstrap 3 for a express node.js app.我正在将 bootstrap 3 用于快速 node.js 应用程序。 And I'm using hogan templating if that matters.如果这很重要，我正在使用 hogan 模板。
4 个解决方案
解决方案1
1 已采纳 2016-10-01 17:29:14
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale = 1"> <title>{{ title }}</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- 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-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">TestApp01</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-collapse" id="rtNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button> </form> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- Some more stuff here --> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" Just Make This Change In The data-target.只需在数据目标中进行此更改。 https://gist.github.com/anonymous/916bb0286c966660121fecbafdd9140a https://gist.github.com/anonymous/916bb0286c966660121fecbafdd9140a
解决方案2
0
这是因为 Bootstrap 与 jQuery 3 不兼容。使用 jQuery 2，或者在 jQuery 之后嵌入 jQuery Migrate。
解决方案3
0 2016-10-01 17:34:18
change your data target its wrong try like this像这样改变你的数据目标是错误的
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rtNavbar" aria-expanded="false">
If doesn't thats because of Bootstrap 3 is not compatible with jQuery 3.0 and above at the moment.如果不是，那是因为 Bootstrap 3 目前与 jQuery 3.0 及更高版本不兼容。 So latest version of jQuery that can be used with Bootstrap 3 is 2.2.4.所以可以与 Bootstrap 3 一起使用的最新 jQuery 版本是 2.2.4。
解决方案4
0 2018-02-19 17:16:47
Part of the problem might be the way (and where) the JS and jQuery is embedded in your code.部分问题可能是 JS 和 jQuery 嵌入代码的方式（以及位置）。 I noticed - at least for the JS - that there isn't a closing </script> tag.我注意到 - 至少对于 JS - 没有结束</script>标签。 I think your problem may be as simple as not having these tags in the right place and not being closed properly.我认为您的问题可能很简单，因为这些标签没有放在正确的位置并且没有正确关闭。
I've used the following <script> additions in the <head> and had the collapse button work, so you may want to try these within the <head> .我在<head>使用了以下<script>添加项，并让折叠按钮起作用，因此您可能想在<head>尝试这些。 It may even be as simple as not including these two scripts right below the Bootstrap CSS link.它甚至可能就像在 Bootstrap CSS 链接正下方不包含这两个脚本一样简单。 It should look something like this (for Bootstrap 3):它应该看起来像这样（对于 Bootstrap 3）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You've also got a problem with the data-target in your <button> tag.您的<button>标签中的data-target也有问题。 Try using something like data-target""#myNavbar" instead.尝试使用类似data-target""#myNavbar"类的东西。
The other thing is that you have a redundant navbar-collapse for the second <div> pertaining to the right-aligned elements in your bar.另一件事是，对于与栏中右对齐元素有关的第二个<div> ，您有一个多余的navbar-collapse 。 This could muddy the waters and cause problems.这可能会使水变得浑浊并导致问题。 Otherwise, the rest of the code materials look good.否则，其余的代码材料看起来不错。 Just try declaring the above code in the <head> .只需尝试在<head>声明上述代码即可。 Good luck!祝你好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.