汉堡下拉菜单打不开答案

【问题标题】：Hamburger dropdown menu does not open汉堡下拉菜单打不开
【发布时间】：2017-05-12 17:08:02
【问题描述】：

我有这个问题，已经处理了一天了。将浏览器窗口调整为较小尺寸时，我的下拉汉堡菜单不会打开。该图标正在显示，但单击时没有任何反应。我还没有这个的 CSS。我链接的 CSS 文件是空的。

我做错了什么？

<!DOCTYPE html>
<html lang="sv-se">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Satsafett</title>

  <!-- Bootstrap -->

  <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
  <link href="satsafettBS.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>

 <!-- Header -->

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    
    <!-- Logo -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand">satsafett</a>
    </div>

    <!-- Menu Items -->
    <div class="collapse navbar-collapse" id="mainNavBar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Speltips</a></li>
        <li><a href="oddsbonusar.html">Oddsbonusar</a></li>
        <li><a href="tv-matcher.html">TV-matcher</a></li>
        <li><a href="casinobonusar.html">Casinobonusar</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您在数据目标属性中的值有误。应该是：

data-target="#mainNavBar"

你缺少哈希

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    
    <!-- Logo -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand">satsafett</a>
    </div>

    <!-- Menu Items -->
    <div class="collapse navbar-collapse" id="mainNavBar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Speltips</a></li>
        <li><a href="oddsbonusar.html">Oddsbonusar</a></li>
        <li><a href="tv-matcher.html">TV-matcher</a></li>
        <li><a href="casinobonusar.html">Casinobonusar</a></li>
      </ul>
    </div>
  </div>
</nav>

  
   

</body>
</html>

【讨论】：

@DavidPeltomaa 如果对您有帮助，请接受答案。这就是 SO 的工作原理，接受答案也可以防止垃圾邮件的答案。