时间戳

首页 > 解决方案 > 如何更改我的 js 代码以使菜单正常工作

javascript - 如何更改我的 js 代码以使菜单正常工作

问题描述

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

$('.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>

标签： javascripthtmljquerycss

解决方案

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

$("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>

推荐阅读