logo标签列表

Bootstrap 3导航栏折叠按钮无法正常工作

jqueryhtmlcsstwitter-bootstrap
31

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

代码：

  <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>
@Randy Greencorn：谢谢，这对我有用！ https://dev59.com/BmIj5IYBdhLWcg3wBA25#26442510 - mihatel
8个回答
57

我遇到了类似的问题。多次检查HTML代码，确定没有错误。然后尝试调整jQuery和Bootstrap JavaScript文件的加载顺序。

最初，我先加载了bootstrap.min.js再加载jquery.min.js，此时单击菜单图标无法展开菜单。

然后我将加载顺序更改为先加载jquery.min.js再加载bootstrap.min.js，这解决了问题。我不太了解JavaScript的工作原理，无法解释这导致问题（或解决问题）的原因，但对我来说这是可行的。

其他信息：

这两个脚本都位于页面底部，在 </body> 标签之前。

这两个脚本都托管在CDN上，而非本地托管。

如果您相当确信编码正确，请尝试此方法。

2
当我将两个脚本都加载在页面底部时，这就是我的问题。 - Chuck Batson
那也是我的问题。我以为Bootstrap折叠只使用CSS。我需要多读一些资料。 - tlehman
这是我的问题的解决方案。谢谢。不过，我把两个脚本都放在了顶部。它仍然可以工作。 - chipbk10
52

您需要更改此标记

 <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>

Js Fiddle演示

21
在 <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的目录）。

1
这似乎并没有回答问题，而详细信息应该在链接资源中提供。 - mins
你的回答不是很清晰，甚至不确定它是否回答了问题。请适当格式化，并解释您解决 OP 问题的步骤。 - nicael
添加jQuery脚本对我很有帮助。谢谢。 <script src="https://code.jquery.com/jquery-2.1.3.js"></script> - bitguider
这对我也起作用了。我不确定为什么每个人都说这不能回答问题，因为如果这两个脚本没有加载，就不会显示菜单。 - lnafziger
在我构建一个带有JSX的React应用时，遇到了这个问题。结果发现Bootstrap JS没有加载，即使路径是正确的。我不得不从CDN获取这个文件。谢谢。 - Abhay Shiro
谢谢，我的Bootstrap JS没有加载。现在已经修复了。 - Sammu Sundar
3

我曾经遇到过同样的问题，当我在<head>标签中添加以下代码时，问题得以解决：

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

我希望这可以帮助到大家！

0

这只是我的个人意见，我遇到了以下问题：

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

将其放在 body 结束标签前无法正常工作，必须添加 crossorigin="anonymous" 才能正常工作，Bootstrap 版本为 3.3.6。...

0

我也遇到过这种情况，我使用了从Bootstrap网站下载的jquery.min.js文件，但它无法正常工作。后来我尝试了其他的jquery.min.js文件，页面就可以正常运行了。所以如果你遇到了这个问题，可以尝试在你的页面中引用其他的jquery.min.js文件并再次尝试。

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

-2
如果有人需要帮助的话，我在将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"));
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接