点击后Jquery Toggle菜单消失
Posted
技术标签:
【中文标题】点击后Jquery Toggle菜单消失【英文标题】：Jquery Toggle menu disappears after clicked on 【发布时间】：2020-09-03 13:04:04 【问题描述】：我有一个学校项目的响应式菜单，一切似乎都运行良好。我看到的唯一问题是汉堡菜单。当我点击它时它消失了。我必须刷新页面才能重新出现。是我的 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" ></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>【问题讨论】：
【参考方案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 的元素的类名更改为top-navresponsive，而不是向其中添加类responsive，因此css 规则.top-nav .navbar-toggle display-block 不会t 不再适用，而是应用 css 规则 .navbar-toggle display: none; 。
【讨论】：
以上是关于点击后Jquery Toggle菜单消失的主要内容，如果未能解决你的问题，请参考以下文章