Bootstrap navbar-toggle 显示按钮但什么也不做答案

【问题标题】：Bootstrap navbar-toggle shows button but does nothingBootstrap navbar-toggle 显示按钮但什么也不做
【发布时间】：2016-06-23 10:34:30
【问题描述】：

我无法在导航栏中切换导航菜单。我也在小提琴中重现了这个问题：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-->

【问题讨论】：

看起来你在引导 JS 文件之后包含了 jQuery.js。将 jquery 文件放在 bootstrap js 之上。提示：检查您的浏览器控制台。它清楚地显示了错误（“未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery”）
感谢@sidzan 的提示和回答

标签： html twitter-bootstrap toggle navbar

【解决方案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-->

【讨论】：

非常感谢您的回答。从现在开始，我总是首先包含 jquery。
没问题，很高兴能帮上忙:)

【解决方案2】：

在 Bootstrap JS 文件之前包含 jQuery

【讨论】：

感谢您的回答

【解决方案3】：

您需要在 javascript 窗口中选择 jquery 版本 11.0 作为引导程序使用 jquery。请检查这个。 <div/>https://jsfiddle.net/mhdnp1234/9bydt08L/5/

【讨论】：