ブートストラップ3.3.5。折りたたまれたメニューは展開されません

Question

私は文字通りここや他の場所で解決策を探していましたが、他の人を助けるものは何でも、私を助けてくれないようです。だから私は、モバイル画面用のブートストラップ3.3.5メニューをクリックして折りたたんで展開したいと思っています。私のコードに問題はありますか？

<!--navbar starts here-->  
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="callapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <div class="Me navbar-brand"> 
      <a href="#"><span class="glyphicon glyphicon-home"></span></a> 
     </div><!--end Me--> 
    </div><!--end navbar-header--> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="index.html">Me</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#work">Work</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#faq">FAQ</a></li> 
     </ul> 
    </div><!--end nav--> 
    </div><!--end nav container--> 
</div> <!--end navbar--> 

私はjqueryのをロードし、この終わりのように本体の端をブートストラップ：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<!-- Bootstrap core JS --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Answer 1

変更データトグル= "崩壊" それは動作します

は私が最後V1.12へのjQueryのJSファイルを更新します良い。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<!-- Bootstrap core JS --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<!--navbar starts here-->  
 
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <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> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <div class="Me navbar-brand"> 
 
      <a href="#"><span class="glyphicon glyphicon-home"></span></a> 
 
     </div><!--end Me--> 
 
    </div><!--end navbar-header--> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="index.html">Me</a></li> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#work">Work</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><a href="#faq">FAQ</a></li> 
 
     </ul> 
 
    </div><!--end nav--> 
 
    </div><!--end nav container--> 
 
</div> <!--end navbar-->

Answer 2

あなたのコードでは、CSSファイルを欠いており、あなたはボタンのデータトグルにタイプミスがありました。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
 

 
<!--navbar starts here-->  
 
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <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> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <div class="Me navbar-brand"> 
 
      <a href="#"><span class="glyphicon glyphicon-home"></span></a> 
 
     </div><!--end Me--> 
 
    </div><!--end navbar-header--> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="index.html">Me</a></li> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#work">Work</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><a href="#faq">FAQ</a></li> 
 
     </ul> 
 
    </div><!--end nav--> 
 
    </div><!--end nav container--> 
 
</div> <!--end navbar--> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Bootstrap core JS --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

が = "callapse" データトグルに