我的汉堡菜单不起作用答案

【问题标题】：My hamburger menu is not working我的汉堡菜单不起作用
【发布时间】：2018-02-02 02:06:17
【问题描述】：

汉堡菜单不起作用，我不知道为什么。

我怀疑缺少一些 JS 文件，但我不知道是哪个。

我正在使用：

Bootstrap 4（测试版，我知道
jQuery
猫头鹰旋转木马

<head>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome/font-awesome.min.css" rel="stylesheet">
    <link href="owlcarousel/owl.carousel.min.css" rel="stylesheet">
    <link href="owlcarousel/owl.theme.default.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/responsivo.css" rel="stylesheet">
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="owlcarousel/owl.carousel.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="inicio" class="nav-menu">
        <nav class="navbar navbar-expand-lg navbar-dark">
          <img src="img/logo-branco.png" class="d-inline-block align-top img-fluid" alt="Connect Hub">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#inicio">INICIO<span class="sr-only"></span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#sobre">SOBRE</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#recursos">RECURSOS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#imagens">IMAGENS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contato">CONTATO</a>
              </li>
            </ul>
          </div>
        </nav>
        <div class="container">
          <div class="nav-menu-texto">
            <div class="col-md-12">
              <h1>TEXT</h1>
            </div>
            <div class="col-md-12 botao">
              <a href="#marketplace" class="btn">BTN</a>
            </div>
          </div>
        </div>
      </div>
  </body>

【问题讨论】：

使用browser console (dev tools)（点击F12）并阅读任何错误。你有没有看到类似“Bootstrap 的 JS 需要 jQuery”之类的东西？
不显示错误。
对了，这不是截图中的章鱼标志吗？
是的，这只是一个测试。

标签： jquery html css bootstrap-4 twitter-bootstrap-4

【解决方案1】：

您应该将jquery.min.js 放在标记中的任何其他脚本之前。正确的顺序是

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="owlcarousel/owl.carousel.min.js" type="text/javascript"></script>

【讨论】：

【解决方案2】：

要解决此问题，请升级到 Bootstrap 4.0.0。发布版本（测试版已过时）并加载以下文件（按此顺序）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

您没有加载 popper.js，这是所有弹出或下拉菜单（如汉堡菜单）所必需的。

【讨论】：