2016-07-26 154 views
0

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

http://pastie.org/10919972

+0

这将是你不错可以发布小提琴或codepen考试ple –

+0

https://jsfiddle.net/x75e7Lq0/ –

+0

链接到代码通常是不可接受的。将它们编辑成问题本身。 – Ares

回答

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>

+0

非常感谢:)多么愚蠢的错误。它的作品完美:D –

+0

哇。真是太棒了。很好的@vanburen –

+0

感谢和高兴我可以帮忙。 – vanburen