Question

正如标题所述，当导航栏打开时（在较小的设备上），我想单击其中一个链接（将与锚点一起使用），并关闭导航栏（仅显示汉堡包）。这是我正在使用的代码。为了满足“您的帖子主要是代码”错误，我删除了许多我认为没有用的代码。请记住，我是新手。预先感谢。

<body>
     <nav>
                  <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                </ul>
         <div class="burger">
             <div class="line1"></div>
             <div class="line2"></div>
             <div class="line3"></div>
         </div>
    </nav>
    <script src="app.js"></script>
</body>

和js

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) => {
       if (link.style.animation) {
           link.style.animation = ''
       } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
       }
    });
        burger.classList.toggle('toggle');
    });        
}
navSlide();




nav {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
}  
.burger {
    display: none;
    cursor: pointer;
    float: right;
}

@media screen and (max-width:1024px){
    .nav-links {
    width: 40%;
    }
}

@media screen and (max-width:768px){
    body{
        overflow-x: hidden;
    }
    .nav-links{
        position: absolute;
        transform: translateX(100%);
        transition: transform 0.3s ease-in;       
    }
    .nav-links li{
        opacity: 0;
    }
    .burger{
        display: block;
        float: right;
    }
}

.nav-active{
    transform: translateX(0%);
}

@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translate(50px);
    }
    to{
        opacity: 1;
        transform: translate(0px);
    }
}
.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    opacity: 0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}

单击链接关闭导航栏

0 个答案: