ブートストラップで折りたたみ可能なナビゲーションバーを作成できません

Question

以下のフィドルを参照してください。 。私は何が私が間違っているの私は折りたたみ式ナビゲーションバー（小型デバイス上のハンバーガーメニューを示すを作成する方法について混乱していると思う

https://jsfiddle.net/xnxcwqyp/

HTML：？

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
<header class="navbar" id="c-nav"> 
    <div class="container"> 
    <a id="logo" href="/">Logo</a> 
    <nav> 

     <div class="navbar-header"> 
     <button class="navbar-toggle" type="button" 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> 
     <!--//nav-toggle--> 
     </div> 
     <!--//navbar-header--> 

     <div class='navbar-collapse collapse' id='navbar-collapse'> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a class="header-text" href="/">Home</a></li> 
      <li><a class="header-text" href="/section">Practice</a></li> 
      <li><a class="header-text" href="/login">Log in</a></li> 
     </ul> 
     </div> 
    </nav> 
    </div> 
</header> 

Answer 1

ただ、追加のjQueryこれは動作するはずです：

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 

フィドル：https://jsfiddle.net/ze5ju72n/