bootstrap 3导航栏折叠按钮不起作用

Question

bootstrap 3导航栏折叠按钮不起作用

use*_*790 27 html css jquery twitter-bootstrap

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

码:

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ran*_*orn 55

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

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

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

附加信息:

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

如果您非常确定您的代码是正确的,请尝试一下.

当我将两个脚本加载到正文的底部时,这是我的问题. (2认同)

Answer 2

Sac*_*hin 48

您需要更改此标记

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

Run Code Online (Sandbox Code Playgroud)

改变了

data-target=".navbar collapse"

至

data-target=".navbar-collapse"

Run Code Online (Sandbox Code Playgroud)

原因:值data-target是相关nav div的任何类名.在这种情况下它是

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

Run Code Online (Sandbox Code Playgroud)

Js Fiddle演示

Answer 3

小智 18

在<body>你应该有两个<script>标签:

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

Run Code Online (Sandbox Code Playgroud)

第一个将从CDN加载jQuery,第二个将从本地目录加载Bootstrap的Javascript(在这种情况下,它是一个名为的目录js).

归档时间：	11 年，10 月前
查看次数：	127499 次
最近记录：	6 年，9 月前