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

Question

我试着切换移动菜单，但我不能让它关闭。当点击关闭菜单时，它不会删除类按钮。

add工作得很好。我的if语句有什么问题吗?谢谢你的帮助。

完整代码在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

使用navList.classList.toggle("show-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";
}
}

应该是:

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

编辑:

正如Raexune指出的，我的回答不完整。所以这是一个更好的解释…

<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);

这不是最好的答案，但是…但是你可以取一些点。我使用id而不是class，这应该更好，因为class可以返回array，因此您必须指示您正在操作的实例。我认为这是代码没有关闭菜单的问题。

其次，有一种更好的方法来使用我使用的函数，但我把它留在那里，以便于理解我如何分别操作这些实例。