jQuery bootstrap 3 导航栏折叠按钮不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20719607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 3 navbar collapse button not working
提问by user3108790
I did some modification in navbar but now the toggle button is not responding on click. Below is my code. Where I am wrong ??
我在导航栏中做了一些修改，但现在切换按钮在点击时没有响应。下面是我的代码。我哪里错了？？
CODE:代码：
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.html">ossoc</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<button id="loginbutton" type="button" class="btn btn-primary narbar-btn"><i class="glyphicon glyphicon-log-in"></i>Login</button>
<button type="button" class="btn btn-success navbar-btn"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button>
</ul>
</div>
</div>
</div>
</div>
</div>
回答by Randy Greencorn
I had a similar problem. Looked over the html several times and was sure it was correct. Then I started playing around with the order of jquery and bootstrap javascript.
我有一个类似的问题。看了几次html，确定它是正确的。然后我开始玩弄 jquery 和 bootstrap javascript 的顺序。
Originally I had bootstrap.min.js loading BEFORE jquery.min.js. In this state, the menu would not expand when clicking on the menu icon.
最初我在 jquery.min.js 之前加载了 bootstrap.min.js。在这种状态下，单击菜单图标时菜单不会展开。
Then I changed the order so that bootstrap.min.js came after jquery.min.js, and this solved the problem. I don't know enough about javascript to explain why this caused the problem (or fixed it), but that is what worked for me.
然后我改变了顺序，让 bootstrap.min.js 排在 jquery.min.js 之后，这就解决了问题。我对 javascript 的了解不够，无法解释为什么这会导致问题（或修复它），但这对我有用。
Additional info:
附加信息：
Both scripts are located at the bottom of the page, just before the tag. Both scripts are hosted on CDNs, not locally hosted.
这两个脚本都位于页面底部，就在标记之前。这两个脚本都托管在 CDN 上，而不是本地托管。
If you're pretty sure your code is correct, give this a try.
如果您非常确定您的代码是正确的，请尝试一下。
回答by Sachin
You need to change in this markup
您需要更改此标记
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar collapse">
change the
改变
data-target=".navbar collapse"
data-target=".navbar collapse"
to
到
data-target=".navbar-collapse"
Reason : The value of data-targetis a any class name of the associated nav div. In this case it is
原因：的值data-target是关联导航 div 的任何类名。在这种情况下是
<div class="collapse navbar-collapse"> <-- Look at here
<ul class="nav navbar-nav navbar-right">
.....
</div>
回答by Farhad
In <body>you should have two <script>tags:
在<body>你应该有两个<script>标签：
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
The first one will load jQuery from the CDN, and second one will load Bootstrap's Javascript from a local directory (in this case it's a directory called js).
第一个将从 CDN 加载 jQuery，第二个将从本地目录（在本例中为名为 的目录js）加载 Bootstrap 的 Javascript 。
回答by mohammad talaie
Well i had the same problem what when i added the following code within the tag my problem fixed :
好吧，当我在标签中添加以下代码时，我遇到了同样的问题，我的问题解决了：
<head>
<meta name="viewport" content="width=device-width , initial-scale=1" />
</head>
I hope this can help you guys!
我希望这可以帮助你们！
回答by Morvael
In my case the issue was due to how I build my Nav bar. I was doing it through a jQuery plugin so I can quickly build Bootstrap components through javascript.
在我的情况下，问题是由于我如何构建导航栏。我是通过 jQuery 插件完成的，所以我可以通过 javascript 快速构建 Bootstrap 组件。
To cut a long story short binding the data elements of the button through jQuery .data() resulted in a collapse button that didn't work, doing it via .attr() fixed the issue.
长话短说，通过 jQuery .data() 绑定按钮的数据元素会导致折叠按钮不起作用，通过 .attr() 修复该问题。
This doesn't work:
这不起作用：
$this.addClass("navbar navbar-default")
.append($("<div />").addClass("container-fluid")
.append($("<div />").addClass("navbar-header")
.append($("<button />").addClass("navbar-toggle collapsed")
.attr("type","button")
.attr("aria-expanded", "false")
.data("target","#" + id)
.data("toggle","collapse")
.html("<span class='sr-only'>Toggle navigation</span>"
+ "<span class='icon-bar'></span>"
+ "<span class='icon-bar'></span>"
+ "<span class='icon-bar'></span>"))
.append($("<a href='#' />").addClass("navbar-brand")
.append(document.createTextNode(settings.label))))
.append($("<div />").addClass("collapse navbar-collapse").attr("id",id)));
But this does (with the changes left in comments):
但这确实（在评论中留下了更改）：
$this.addClass("navbar navbar-default")
.append($("<div />").addClass("container-fluid")
.append($("<div />").addClass("navbar-header")
.append($("<button />").addClass("navbar-toggle collapsed")
.attr("type","button")
.attr("aria-expanded", "false")
.attr("data-target", "#" + id) //.data("target","#" + id)
.attr("data-toggle", "collapse") // .data("toggle","collapse")
.html("<span class='sr-only'>Toggle navigation</span>"
+ "<span class='icon-bar'></span>"
+ "<span class='icon-bar'></span>"
+ "<span class='icon-bar'></span>"))
.append($("<a href='#' />").addClass("navbar-brand")
.append(document.createTextNode(settings.label))))
.append($("<div />").addClass("collapse navbar-collapse").attr("id",id)));
I can only assume that this is related to the way jQuery binds .data(), it doesn't write the attributes out to the elements, but just attaches them to the jQuery object. Using the .data() version resulted in HTML:
我只能假设这与 jQuery 绑定 .data() 的方式有关，它不会将属性写入元素，而只是将它们附加到 jQuery 对象。使用 .data() 版本会生成 HTML：
<button class="navbar-toggle collapsed" aria-expanded="false" type="button" >
Where as the .attr() version gives:
其中 .attr() 版本给出：
<button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-toggle="collapse" data-target="#6a2034fe-8922-4edd-920e-6bd0ea0b2caf">
It seems that Bootstrap needs the data-nnn attribute in the HTML.
Bootstrap 似乎需要 HTML 中的 data-nnn 属性。
回答by Ahmed Walaa Eldin
It happened with me, I used jquery.min.js file that downloaded from bootstrap site it is not working, I tried same page with other jquery.min.js file it worked fine so if you face this problem try to reference other jquery.min.js file in your page and try again
它发生在我身上，我使用了从引导站点下载的 jquery.min.js 文件它不起作用，我尝试了与其他 jquery.min.js 文件相同的页面，它工作正常，因此如果您遇到此问题，请尝试引用其他 jquery。 min.js 文件，然后重试
回答by krsnik93
Just my 2 cents, had:
只有我的 2 美分，有：
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
at the end of body, wasn't working, had to add crossorigin="anonymous"and now it's working, Bootstrap version 3.3.6. ...
在正文的末尾，没有工作，必须添加crossorigin="anonymous"，现在它正在工作，Bootstrap 版本 3.3.6。...
回答by punatiainen
In case it might help someone, I had a similar issue after adding Bootstrap 3 to my MVC 4 project. It turned out my problem was that I was referring to bootstrap-min.js instead of bootstrap.js in my BundleConfig.cs.
万一它可能对某人有所帮助，在将 Bootstrap 3 添加到我的 MVC 4 项目后，我遇到了类似的问题。原来我的问题是我在 BundleConfig.cs 中指的是 bootstrap-min.js 而不是 bootstrap.js。
Didn't work:
没有用：
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap-min.js"));
Worked:
工作过：
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
