Jquery 点击后切换菜单消失

Question

我有一个学校项目的响应式菜单，一切似乎都运行良好。我看到的唯一问题是汉堡菜单。当我点击它时它消失了。我必须刷新页面才能重新出现。我的 CSS 或 JS 有问题吗？

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font-family: azo-sans-web, Arial, Helvetica, sans-serif;
}
nav {
  overflow: hidden;
  background-color: #fff;
}
.logo {
  float: left;
  display: block;
  height: 40px;
  margin: 10px 20px;
}
.main-nav {
  display: inline-block;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
}
.buttons-container {
  float:right;
}
.button {
  display: inline-block;
  width: 80px;
  font-size: 14px;
  color: black;
  background-color: #f7941d;
  text-align: center;
  margin: 12px 5px;
  padding: 10px 10px;
  text-decoration: none;
}
.main-nav:hover {
  background-color: #ddd;
  color: black;
}
nav .active {
  background-color: #2196F3;
  color: white;
}
.navbar-toggle {
  display: none;
}

/* Mobile */
@media screen and (max-width: 800px) {
  .top-nav a {
    display: none;
  }
  .top-nav .navbar-toggle {
    color: red;
    font-size: 24px;
    margin: 5px;
    display: block;
    float: right;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .logo {
    float: none;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .main-nav {
    float: none;
    display: inline-block;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .buttons-container {
    float: none;
  }
  .button {
    float: none;
    display: inline-block;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 14px;
    background-color: inherit;
    font-size: inherit;
  }
  .button:hover {
    background-color: #ddd;
    color: black;
  }
  .top-nav.responsive {
    position: relative;
  }
  .top-nav.responsive .navbar-toggle {
    position: absolute;
  }
  .top-nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<!DOCTYPE html>
<html lang="en">
<head
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome | Volpe Air</title>
  <link rel="stylesheet" href="https://use.typekit.net/zon4udc.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
<!-- Navigation -->
<nav>
  <div class="top-nav" id="myTopnav">
    <img href="index.html" class="logo" src="images/volpeair_logo.png" class="logo" alt="Volpe Air Logo"></img>
    <a href="#" class="main-nav active">Book</a>
    <a href="#" class="main-nav">Travel Info</a>
    <a href="#" class="main-nav">Discover</a>
    <a href="#" class="main-nav">VolpeMiglia</a>
    <a href="#" class="main-nav">Our Airline</a>
    <div class="buttons-container">
      <a href="#" class="button">Log In</a>
      <a href="#" class="button">Sign Up</a>
  </div>
    <a href="javascript:void(0);" class="navbar-toggle" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</nav>

<!-- JS -->

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "top-nav") {
    x.className += "responsive";
  } else {
    x.style.display = "top-nav";
  }
}
</script>

</body>
</html>

Answer 1

您必须像这样调整您的代码，以便汉堡包菜单保持可见：

 function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "top-nav") {
      x.className += " responsive";
    } else {
    x.style.display = "top-nav";
    }
 }

您的行 x.className += "responsive"; 导致将 ID 为 myTopnav 的元素的 class 名称更改为 top-navresponsive，而不是添加 class responsive，因此 css 规则 .top-nav .navbar-toggle { display-block } 不再适用，css 规则 .navbar-toggle { display: none; } 适用。

Jquery 点击后切换菜单消失

Jquery Toggle menu disappears after clicked on

css

jquery

menu

toggle