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/

＆＃13;

<script>

＆＃13;

.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;
  }
}

＆＃13;

Answer 2

在Bootstrap JS文件之前包含jQuery

Answer 3

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

Bootstrap navbar-toggle显示按钮但不执行任何操作

3 个答案: