如何更改js代码以使菜单正常工作

我的导航有点问题。我希望菜单从底部向上，在单击汉堡后，然后在选择其中一个选项后，向下滚动页面至所选的部分，向后隐藏。一切正常，直到我想再次使用导航-菜单隐藏后，我无法再次打开它。我应该如何更改代码以使其工作？。

$('.home').on('click', function () {
$('body,html').animate({
scrollTop: $('.Home').offset().top
}, 500)
$("menu").addClass("down");
})
$('.about').on('click', function () {
$('body,html').animate({
scrollTop: $('.About').offset().top
}, 500)   
$("menu").addClass("down");
})
$('.gallery').on('click', function () {
$('body,html').animate({
scrollTop: $('.Gallery').offset().top
}, 500)
$("menu").addClass("down");
})
$('.contact').on('click', function () {
$('body,html').animate({
scrollTop: $('Contact').offset().top
}, 500)
$("menu").addClass("down");
})
$(".burger").on("click", function () {
$(".fas, menu ").toggleClass("off");
})

*{
padding:0;
margin:0;
box-sizing:border-box;
}
nav{
position:fixed;
height:100px;
width:100%;
padding:0 20px;
background-color: greenyellow;
display:flex;
align-items: center;
justify-content: space-between;
z-index:4;
}
.logo{
width:70px;
height:70px;
background-color: #fff;
z-index:5;
}
.burger{
width:70px;
height:100%;
display:flex;
align-items: center;
justify-content: center;
z-index:5;
}
.burger i{
color:#fff;
font-size:20px;
}
.burger i.off{
display:none;
}
menu{
position: fixed;
bottom: -150%;
left: 0;
height:100vh;
width: 100vw;
background-color: greenyellow;
transition: .5s;
z-index: 1;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
menu.off{
bottom:0;
}
menu.down{
bottom:-100%;
}

menu a{
font-size: 20px;
padding:20px 0;
font-family: sans-serif;
text-decoration:none;
color:#fff;
z-index:2;
}
.Home{
position:relative;
height:100vh;
background-color: lightblue;
}
.About{
height:100vh;
background-color: rebeccapurple;
}
.Gallery{
height:100vh;
background-color: tomato;
}
.Contact{
height:100vh;
background-color: cadetblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation</title>
<script src="https://kit.fontawesome.com/2e3d9b3214.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
<div class="logo"></div>
<div class="burger">
<i class="fas fa-bars"></i>
<i class="fas fa-angle-down off "></i>
</div>
</nav>
<section class="Home">
<menu>
<a class="home" href="#">Home</a>
<a class="about"href="#">About us</a>
<a class="gallery"href="#">Gallery</a>
<a class="contact"href="#">Contact</a>
<menu>
</section>
<section class="About"></section>
<section class="Gallery"></section>
<section class="Contact"></section>
<script src="jquery-3.3.1.min.js"></script>
<script src="nav.js"></script>
</body>
</html>

这就是它的工作方式。我删除了行：

$("menu").addClass("down");

因为不需要它们，而是添加了一个事件来隐藏点击后的菜单：

$(".Home a").on("click", function () {
$(".Home menu").removeClass("off");
$(".fas").toggleClass("off");
})

$('.home').on('click', function () {
$('body,html').animate({
scrollTop: $('.Home').offset().top
}, 500)
//$("menu").addClass("down");
})
$('.about').on('click', function () {
$('body,html').animate({
scrollTop: $('.About').offset().top
}, 500)   
//$("menu").addClass("down");
})
$('.gallery').on('click', function () {
$('body,html').animate({
scrollTop: $('.Gallery').offset().top
}, 500)
//$("menu").addClass("down");
})
$('.contact').on('click', function () {
$('body,html').animate({
scrollTop: $('.Contact').offset().top
}, 500)
//$("menu").addClass("down");
})
$(".burger").on("click", function () {
$(".fas, menu ").toggleClass("off");
});
$(".Home a").on("click", function () {
$(".Home menu").removeClass("off");
$(".fas").toggleClass("off");
})

*{
padding:0;
margin:0;
box-sizing:border-box;
}
nav{
position:fixed;
height:100px;
width:100%;
padding:0 20px;
background-color: greenyellow;
display:flex;
align-items: center;
justify-content: space-between;
z-index:4;
}
.logo{
width:70px;
height:70px;
background-color: #fff;
z-index:5;
}
.burger{
width:70px;
height:100%;
display:flex;
align-items: center;
justify-content: center;
z-index:5;
}
.burger i{
color:#fff;
font-size:20px;
}
.burger i.off{
display:none;
}
menu{
position: fixed;
bottom: -150%;
left: 0;
height:100vh;
width: 100vw;
background-color: greenyellow;
transition: .5s;
z-index: 1;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
menu.off{
bottom:0;
}
menu.down{
bottom:-100%;
}

menu a{
font-size: 20px;
padding:20px 0;
font-family: sans-serif;
text-decoration:none;
color:#fff;
z-index:2;
}
.Home{
position:relative;
height:100vh;
background-color: lightblue;
}
.About{
height:100vh;
background-color: rebeccapurple;
}
.Gallery{
height:100vh;
background-color: tomato;
}
.Contact{
height:100vh;
background-color: cadetblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation</title>
<script src="https://kit.fontawesome.com/2e3d9b3214.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
<div class="logo"></div>
<div class="burger">
<i class="fas fa-bars"></i>
<i class="fas fa-angle-down off "></i>
</div>
</nav>
<section class="Home">
<menu>
<a class="home" href="#">Home</a>
<a class="about"href="#">About us</a>
<a class="gallery"href="#">Gallery</a>
<a class="contact"href="#">Contact</a>
<menu>
</section>
<section class="About"></section>
<section class="Gallery"></section>
<section class="Contact"></section>
<script src="jquery-3.3.1.min.js"></script>
<script src="nav.js"></script>
</body>
</html>

请清理那个html。此外，请使用锚点。您不需要这些特定的类和动画函数。您滥用了<menu>标签，顺便说一句，这是实验性的。您还滥用了<nav>标记，如果不明显的话，它应该包含导航元素。如果可以的话，避免使用jQuery，因为它已经过时了，如果可以使用普通的javascript。我知道这不是预期的答案，但它很重要。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation</title>
<script src="https://kit.fontawesome.com/2e3d9b3214.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="logo"></div>
<div class="burger">
<i class="fas fa-bars"></i>
<i class="fas fa-angle-down off"></i>
</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About us</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<div class="content">
<section id="home"></section>
<section id="about"></section>
<section id="gallery"></section>
<section id="contact"></section>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="nav.js"></script>
</body>
</html>

尝试将汉堡点击事件jquery代码更改为：

$(".burger").on("click", function () {
$(".fas, menu ").toggleClass("off");
$('menu').removeClass("down");
})

相关内容

最新更新

热门标签：