Bootstrap navbar-toggle 显示按钮但什么都不做

Question

我无法切换导航栏中的导航菜单。我也在 fiddle 中重现了这个问题：https://jsfiddle.net/9bydt08L/3/
我也包括必要的 js 和 css 但不知道为什么它不适合我。在Whosebug中查找了所有相关问题并尝试了所有可能的方法但无法找出错误所在。谁能指出错误在哪里？

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

在 Bootstrap JS 文件之前包含 jQuery

Answer 2

脚本的顺序很重要。首先包括 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 3

您需要在 javascript window 中选择 jquery 版本 11.0，因为 bootstrap 使用 jquery。请检查这个。 <div/>https://jsfiddle.net/mhdnp1234/9bydt08L/5/

Bootstrap navbar-toggle 显示按钮但什么都不做

Bootstrap navbar-toggle shows button but does nothing

html

toggle

navbar

twitter-bootstrap