Bootstrap导航栏按钮不切换

时间:2016-07-26 19:02:04

标签: javascript jquery html css twitter-bootstrap

我不知道为什么单击按钮时导航栏没有显示。我正在寻找我的代码中的错误,但我找不到它。我正在比较Youtube教程中的代码和来自互联网的其他来源,所有内容都像我的一样。我附上了我的HTML代码。我在下面的链接中附加了我的代码。感谢您的帮助:)

http://pastie.org/10919972

1 个答案:

答案 0 :(得分:1)

错误拼写

目标data-taget="#example"应为data-target="#example"

示例:



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <h3> <a href="#">BrandName</a></h3>
    </div>

    <div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav navbar-right">
        <li><a class="active" href="#">Home</a>
        </li>
        <li><a href="#">Services</a>
        </li>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">Contact us</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
&#13;
&#13;
&#13;