我想切换一个移动菜单，我可以添加类但它不会删除它。 javascript

Question

I try to toggle the mobile menu, but I can't get it to close. It doesn't remove the class when clicking the Close menu button.

Adding works pretty fine. Is there something wrong with my if-statement? Thank you for helping me.

Full code is on Github

 const openMenu = document.querySelector('.open-menu'); const closeMenu = document.querySelector('.close-menu'); const navList = document.querySelector('.nav-list'); const navBurger = document.querySelector('.nav-burger'); // Toggle Menu function toggleMenu() { if (navList.classList.contains('show-menu')) { navList.classList.remove('show-menu'); closeMenu.style.display = 'none'; openMenu.style.display = 'block'; } else { navList.classList.add('show-menu'); closeMenu.style.display = 'block'; openMenu.style.display = 'none'; } } navBurger.addEventListener('click', toggleMenu);

 <nav> <h3 class="nav-logo"><img class="logo-icon" src="https://www.coditt.com/images/LogoPlaceholder.png" alt="placeholdeer" style="width: 75px"/> Vacation</h3> <ul class="nav-list"> <li class="menu-item"><a href="#">Tours</a></li> <li class="menu-item"><a href="#">About us</a></li> <li class="menu-item"><a href="#">Contact</a></li> </ul> <a class="nav-burger" href="#"><img class="open-menu" alt="open menu" />Open menu</a> <a href="#" class="nav-burger"><img class="close-menu" alt="close menu" />Close menu</a> </nav>

Answer 1

Use navList.classList.toggle("show-menu") .

So instead of:

function toggleMenu() {
    if (navList.classList.contains("show-menu")) {
        navList.classList.remove("show-menu");
        closeMenu.style.display = "none";
        openMenu.style.display = "block";
    } else {
        navList.classList.add("show-menu");
        closeMenu.style.display = "block";
        openMenu.style.display = "none";
    }
}

It should be:

function toggleMenu() {
    navList.classList.toggle("show-menu");
}

EDIT:

As Raexune pointed out, my answer wasn't complete. So here is a better explanation..

<a class="nav-burger" id="open" href="#"><img class="open-menu" src="./img/menu-svgrepo-com.svg" alt="open menu"></a>
            <a href="#" class="nav-burger" id="close"><img class="close-menu" src="./img/close-svgrepo-com.svg" alt="close menu"></a>

function toggleMenu() {
    navList.classList.toggle('show-menu')
    openMenu.style.display = 'none';
    closeMenu.style.display = 'block';
}

function untoggleMenu(){
    navList.classList.toggle('show-menu');
    openMenu.style.display = 'block';
    closeMenu.style.display = 'none';
}



document.getElementById('open').addEventListener('click', toggleMenu);
document.getElementById('close').addEventListener('click', untoggleMenu);

This isn't really the best answer, still.. but you can take some points. I used id instead of class , which should be better since class can return an array and so you have to indicate which instance you are manipulating. I believe that was the problem with the code not closing the menu.

And second, there is a better way to use the functions that I used but I left it there to make it understandable as to how I manipulated these instances separately.