js如何在按下链接时关闭导航栏？答案

【问题标题】：js how to make navbar close when a link is pressed?js如何在按下链接时关闭导航栏？
【发布时间】：2020-03-12 09:05:31
【问题描述】：

所以我试图在单击链接时关闭我的导航栏。单击时的链接被定向到一个部分而不是一个新页面。导航栏在大屏幕上时我希望它仍然显示，但是当它在小屏幕上时我希望汉堡菜单将自动关闭，例如按下下一个事件链接有什么想法吗？


<body>
        <nav>
        <header class="header d-flex align-items-center container-fluid">
      <div class="row align-items-center flex-grow-1">
        <div class="col-auto">
          <div class="logo">
                  <h4>thomas<br> venutu</h4>
                </div>
        </div>
            <ul class="nav-links ">
                <li><a href="#section2">Home</a> </li>
                <li><a href="#section2">NextEvent</a> </li>
                <li><a href="index">Music </a> </li>
                <li><a href="index">About</a> </li>
                <li><a href="index">Boooking</a> </li>

            </ul>

            <div class="burger">
                <div class="line2"></div>
                <div class="line1"></div>
                <div class="line3"></div>
            </div>
            </div>
            </header>
        </nav>

#

html{
    scroll-behavior: smooth;
}

#extra space{

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#section2 {

        color: #fff;
        text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
        text-align: center;
        padding: 5em 0 5em 0;
        margin: 0;
        background-size: 125% auto;
    }



#section2 header {
            margin: 0 0 2em 0;
        }


    *{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
  position:sticky;
  top:0;
  min-height: 12vh;
  background-color: #0c0c0c;
}

.logo{
    color:whitesmoke;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size:22px;
}

.nav-links{
    display:flex!important;
    justify-content: space-around!important;
    width: 100%!important;


}
.nav-links li{
    list-style: none;
}

.burger div{
    width: 25px;
    height: 5px;
    background-color:whitesmoke;
    margin:3px;
}
.burger{
    display:none;
    cursor: pointer;
}

.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}

@media screen and (max-width:1024px){
    .nav-links{
    display:inline-flex;
    justify-content: space-around;
    width: 60%;


}

}

@media screen and (max-width:768px){
    body{
        overflow-x:hidden;
    }
    .nav{
        position: fixed;
        top: 0;
    }
    .nav-links{
        font-size: 1px;
        position:fixed;
        right:0px;
        height:92vh;
        top: 0px;
        background-color: #0c0c0c;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .nav-disable{
        transform: translateX(100%);
    }
    .nav-links li{
        ;

    }

    .burger{
        display: block;
         position: absolute;
         top: 8px;
         right: 16px;

    }

    .nav-active{
    transform: translateX(30%);
    }
    #section2 {
    background-image:url("background image venuto4.jpg");
    background-repeat:no-repeat;
    height: 100%;
    width:100% ;
    background-color: black;

}
    #getting-started{
        font-size:12px;
    }

    #day{
        font-size:14px;
    }
    #minutes{
        font-size:14px;
    }
    #hours{
        font-size:12px;
    }
}
#section1 {
    background-image: url("background6.png");
    background-position: center center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    background-attachment: fixed;
    background-size: cover;
    background-color:black;


}
#section2 {
    background-image:url("background image venuto4.jpg");
    background-image:no-repeat;
    height: 100%;
    width:100% ;
    background-color: black;

}
#section3 {
    background-color: black;
    height: 100%;
}
#section4 {
    background-color: whitesmoke;
    height: 700px;

}
#section5 {
    background-color: yellow;
    height: 700px;
}
.btn-info{
    text-transform: uppercase;
    font-size: 25px;
}

.card-img-top{
    height: 150px;
    width: 100px;
}
h1{color: #3b3e42;

}

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active');


    });

    navLinks.forEach((link, index) => {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7}s`;
        console.log(index / 7);
        nav.classList.toggle('nav-disable');
    });

    navLinks.addEventListener('click', () => {
        nav.classList.toggle('nav-active');


    });



}
navSlide();

需要修复

navLinks.addEventListener('click', () => {
        nav.classList.toggle('nav-active');


    });

【问题讨论】：

正如我在上一个问题中告诉你的，当你打电话给querySelector() 时，你忘记了. 中的.
@victor inside querySelector 您正在搜索 nav-links 但在您的 HTML 中 nav-links 是一个类。所以查询应该是.nav-links。这类似于我们在 CSS 文件中选择元素的方式。
谢谢我坚持它没有做任何事情，但我忘了保存欢呼
这能回答你的问题吗？ Page appears different in each browser, I can't figure out why

标签： javascript jquery html css

【解决方案1】：

你在这行有错字：

    const nav = document.querySelector(`nav-links`);

你错过了使它寻找类的.，所以它正在寻找像<nav-links>这样的标签

应该是：

    const nav = document.querySelector(`.nav-links`);

【讨论】：