Question

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

我怀疑某些JS文件丢失了，但我不知道哪个。

我正在使用：

Bootstrap 4（Beta，我知道
的jQuery
Owl Carousel

<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>

Answer 1

You should place jquery.min.js before any other scripts in your markup. Correct order is

<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>

Answer 2

To fix the issue, upgrade to Bootstrap 4.0.0. release version (beta is outdated) and load the following files (in that order):

<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>

You weren't loading the popper.js and that is required for all things that pop up or drop down like the hamburger menu.

我的汉堡菜单不起作用

2 个答案: