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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.