Bootstrap Navbar-toggle显示按钮，但什么也不做

Question

我无法切换导航菜单。我也在小提琴中重现了问题：https：//jsfiddle.net/9bydt08l/3/
我还包括必要的JS和CSS，但不知道为什么它不适用于我。查找Stackoverflow中的所有相关问题，并尝试了所有可能的一切，但无法弄清楚错误在哪里。任何人都可以指出错误在哪里？

CSS和HTML：

.navbar{
  background-color: #D9F7F6;
  padding-top: 15px;
  padding-bottom: 15px;
}
body{
  background-color: #E6E7E7;
}
@media (max-width: 768px) {
  .navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
  }
}

<div class="container" id="main">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!--COLLAPSE BUTTON FOR NAVBAR MENU-->
      <button class="navbar-toggle" data-target="#menu-collapse" data-toggle="collapse" type="button">
        <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="navbar-header">
        <a href="#" class="navbar-brand">PRADIP KHADKA</a>
      </div><!--END NAVBAR HEADER-->
      <div class="nav-collapse navbar-collapse collapse" id="menu-collapse">
        <ul class="nav navbar-nav pull-right" id="navMenu">
          <li class="active"><a href="#">ABOUT</a></li>
          <li><a href="#">PORTFOLIO</a></li>
          <li><a href="#">SOCIAL MEDIA</a></li>
        </ul>
      </div><!--END OF NAVBAR MENUS-->
    </div><!--END OF NAVBAR CONTAINER-->
  </div><!--END OF NAVBAR-->
</div><!--END OF MAIN CONTAINER-->

Answer 1

脚本的顺序很重要。包括第一个jQuery，然后bootstrap.js请参阅我更新的JSFIDDLE https://jsfiddle.net/vhu0z9xs/

.navbar{
  background-color: #D9F7F6;
  padding-top: 15px;
  padding-bottom: 15px;
}
body{
  background-color: #E6E7E7;
}
@media (max-width: 768px) {
  .navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<div class="container" id="main">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!--COLLAPSE BUTTON FOR NAVBAR MENU-->
      <button class="navbar-toggle" data-target="#menu-collapse" data-toggle="collapse" type="button">
        <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="navbar-header">
        <a href="#" class="navbar-brand">PRADIP KHADKA</a>
      </div><!--END NAVBAR HEADER-->
      <div class="nav-collapse navbar-collapse collapse" id="menu-collapse">
        <ul class="nav navbar-nav pull-right" id="navMenu">
          <li class="active"><a href="#">ABOUT</a></li>
          <li><a href="#">PORTFOLIO</a></li>
          <li><a href="#">SOCIAL MEDIA</a></li>
        </ul>
      </div><!--END OF NAVBAR MENUS-->
    </div><!--END OF NAVBAR CONTAINER-->
  </div><!--END OF NAVBAR-->
</div><!--END OF MAIN CONTAINER-->

Answer 2

在bootstrap js file

Answer 3

您需要在javascript窗口中选择jQuery版本11.0作为bootstrap使用jquery。请检查一下。 <div/> https://jsfiddle.net/mhdnp1234/9bydt08l/5/