Question

我在导航栏中做了一些修改，但现在切换按钮在点击时没有响应。以下是我的代码。哪里错了？

<小时/> 的 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>

Answer 1

我有类似的问题。多次查看html并确定它是正确的。然后我开始玩jquery和bootstrap javascript的顺序。

最初我在jquery.min.js之前加载了bootstrap.min.js。在此状态下，单击菜单图标时菜单不会扩展。

然后我更改了顺序，以便在jquery.min.js之后找到bootstrap.min.js，这解决了问题。我不太了解javascript来解释为什么这会导致问题（或修复它），但这对我有用。

其他信息：

这两个脚本都位于页面底部，就在标记之前。这两个脚本都托管在CDN上，而不是本地托管。

如果您非常确定您的代码是否正确，请尝试一下。

Answer 2

您需要更改此标记

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar collapse">

更改

data-target=".navbar collapse"

到

data-target=".navbar-collapse"

原因：data-target的值是关联的nav div的任何类名。在这种情况下，它是

<div class="collapse navbar-collapse">  <-- Look at here
     <ul class="nav navbar-nav navbar-right">
     .....
</div>

Js Fiddle Demo

Answer 3

在<body>中，您应该有两个<script>标记：

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>

第一个将从CDN加载jQuery，第二个将从本地目录加载Bootstrap的Javascript（在这种情况下，它是一个名为js的目录）。

Answer 4

当我在标签中添加以下代码时，我遇到了同样的问题我的问题解决了：

    <head>
       <meta name="viewport" content="width=device-width , initial-scale=1" />
    </head>

我希望这可以帮助你们！

Answer 5

发生在我身上，我使用了从bootstrap网站下载的jquery.min.js文件它不工作，我尝试与其他jquery.min.js文件相同的页面它工作正常，所以如果你遇到这个问题尝试在你的页面中引用其他jquery.min.js文件，然后再试一次

Answer 6

只需2美分，就有了：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

在身体的最后，没有工作，不得不添加crossorigin="anonymous"，现在它正在工作，Bootstrap版本3.3.6。 ...

Answer 7

在我的情况下，问题是由于我如何构建我的导航栏。我是通过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属性。

Answer 8

如果它可以帮助某人，我在将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 3导航栏折叠按钮不起作用

8 个答案: