[英]bootstrap 3 navbar collapse button not working
我在导航栏中做了一些修改，但现在切换按钮在点击时没有响应。 下面是我的代码。 我哪里错了？？
<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>我有一个类似的问题。 看了几次html，确定它是正确的。 然后我开始使用 jquery 和 bootstrap javascript 的顺序。
最初我在 jquery.min.js 之前加载了 bootstrap.min.js。 在这种状态下，单击菜单图标时菜单不会展开。
然后我改变了顺序，让 bootstrap.min.js 排在 jquery.min.js 之后，这就解决了问题。 我对 javascript 的了解不够，无法解释为什么这会导致问题（或修复它），但这对我有用。
附加信息：
这两个脚本都位于页面底部，就在标记之前。 这两个脚本都托管在 CDN 上，而不是本地托管。
如果您非常确定您的代码是正确的，请尝试一下。
您需要更改此标记
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar collapse">
改变
data-target=".navbar collapse"
到
data-target=".navbar-collapse"
原因： data-target的值是关联导航 div 的任何类名。 在这种情况下是
<div class="collapse navbar-collapse"> <-- Look at here
<ul class="nav navbar-nav navbar-right">
.....
</div>
在<body>你应该有两个<script>标签：
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
第一个将从 CDN 加载 jQuery，第二个将从本地目录（在本例中它是一个名为js的目录）加载 Bootstrap 的 Javascript。
好吧，当我在标签中添加以下代码时，我遇到了同样的问题，我的问题解决了：
<head>
<meta name="viewport" content="width=device-width , initial-scale=1" />
</head>
我希望这可以帮助你们！
它发生在我身上，我使用了从引导站点下载的 jquery.min.js 文件它不起作用，我尝试了与其他 jquery.min.js 文件相同的页面，它工作正常，因此如果您遇到此问题，请尝试引用其他 jquery。 min.js 文件，然后重试
只有我的 2 美分，有：
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
在正文的末尾，没有工作，不得不添加crossorigin="anonymous"现在它正在工作，Bootstrap 版本 3.3.6。 ...
在我的情况下，问题是由于我如何构建导航栏。 我是通过 jQuery 插件完成的，所以我可以通过 javascript 快速构建 Bootstrap 组件。
长话短说，通过 jQuery .data() 绑定按钮的数据元素会导致折叠按钮不起作用，通过 .attr() 修复该问题。
这不起作用：
$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)));
但这确实（在评论中留下了更改）：
$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)));
我只能假设这与 jQuery 绑定 .data() 的方式有关，它不会将属性写入元素，而只是将它们附加到 jQuery 对象。 使用 .data() 版本会生成 HTML：
<button class="navbar-toggle collapsed" aria-expanded="false" type="button" >
其中 .attr() 版本给出：
<button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-toggle="collapse" data-target="#6a2034fe-8922-4edd-920e-6bd0ea0b2caf">
Bootstrap 似乎需要 HTML 中的 data-nnn 属性。
万一它可能对某人有所帮助，在将 Bootstrap 3 添加到我的 MVC 4 项目后，我遇到了类似的问题。 原来我的问题是我在 BundleConfig.cs 中指的是 bootstrap-min.js 而不是 bootstrap.js。
没有用：
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap-min.js"));
工作过：
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
切换按钮折叠在引导程序中的Bootstrap导航栏中不起作用
[英]Toggle button collapse not working in Bootstrap navbar in bootstrap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.