为什么我的下拉菜单在导航栏上不起作用？答案

【问题标题】：Why isn't my dropdown menu working on navbar?为什么我的下拉菜单在导航栏上不起作用？
【发布时间】：2019-02-10 05:49:23
【问题描述】：

我正在尝试开发一个响应式顶部导航菜单，但我在使用汉堡菜单时遇到了一些问题。当我调整浏览器大小并单击汉堡包图标时，它不会做任何事情。我的 html 上有 jquery，但是由于某种原因调整浏览器大小时，我无法关闭菜单。任何帮助将不胜感激。

这是我的代码：

$('.nav-toggle').click(function() {
  if ($('.top-nav-links').css('margin-top') == '-225px') {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});

$(window).resize(function() {
  if ($(window).width() > 730) {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});

$(document).ready(function() {
  if ($(window).width() > 730) {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #f8f8f8;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/* TOP NAVIGATION CSS */

.top-nav {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 0 30px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.logo:link {
  color: red;
  text-decoration: none;
  font-size: 26pt;
  margin: 10.5px 0;
  display: inline-block;
  float: left;
  font-weight: bold;
}

.logo:visited {
  color: red;
  text-decoration: none;
}

.top-nav-links {
  display: inline-block;
  margin: 0;
  float: right;
}

.top-nav-links li {
  display: inline-block;
  margin: 0 10px;
  padding: 15px 0;
}

.top-nav-links li:first-of-type {
  margin-left: 0;
}

.top-nav-links li:last-of-type {
  margin-right: 0;
}

.top-nav-links li a:link {
  color: red;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.top-nav-links li a:visited {
  color: red;
  text-decoration: none;
  font-size: 18px;
}

.top-nav-links li a:hover {
  color: red;
}

.nav-toggle {
  float: right;
  font-size: 30px;
  margin: 8.2px 0;
  color: red;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  display: none;
}

.nav-toggle:hover {
  color: red;
}

@media all and (max-width: 730px) {
  .top-nav-links {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: -255px;
    display: none;
  }
  .top-nav-links li {
    display: block;
    margin: 0;
    text-align: center;
  }
  .nav-toggle {
    display: inline-block;
  }
}

<html>

<head>
  <title>TopNav</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet" type="text/css">
  <!-- SCRIPTS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="functions.js">
  </script>
</head>

<body>
  <!-- TOP NAVIGATION -->
  <div class="top-nav clearfix">
    <a href="index.html" class="logo">TopNav</a>
    <div class="nav-toggle">
      <i class="icon ion-md-menu"></i>
    </div>
    <ul class="top-nav-links">
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Shop</a>
      </li>
      <li>
        <a href="#">About Us</a>
      </li>
      <li>
        <a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</body>

</html>

【问题讨论】：

标签： javascript jquery html css web

【解决方案1】：

您的 nav-toggle click 函数存在一些问题。

如果您在其他任何地方检查 margin-top 值和 -225px 的值，它的 -255px 我认为这是一个错字。
在max-width: 730px 屏幕上，您将display: none 添加到top-nav-links 类。您还需要在 nav-toggle click 函数中切换它。

您的最终nav-toggle click 函数可能如下所示：

    $('.nav-toggle').click(function () {
        if ($('.top-nav-links').css('margin-top') == '-255px') {
            $('.top-nav-links').css('margin-top', '0').css('display', 'inline-block');
        } else {
            $('.top-nav-links').css('margin-top', '-255px').css('display', 'none');
        }
    });

【讨论】：