Javascript 无法使移动导航重新出现

我试图通过添加和删除带有display:none属性的css类来切换导航栏的显示。My js将添加该类，但不会删除它以防止nav隐藏

<div class="hambugerMenu">
   <i class="bars"></i>
</div>

<div id="mobileNav" class="mobileNav">
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
   </ul>
</div>

---

nav

仍然有

mobileNav

类，因此第一个if语句正在触发，不允许else if语句运行。您可以将其更改为先检查

mobileNavHidden

是否存在，然后决定如何处理它

前

改变你的功能

function hideShowNav() {
    var nav = document.querySelector('#mobileNav')
    if (nav.classList.contains('mobileNavHidden')) {

      nav.classList.remove("mobileNavHidden")
    } 
    else {
         nav.classList.add("mobileNavHidden")
    }
}

document.querySelector('.hambugerMenu').addEventListener('click', ()=> {
    hideShowNav()
})

function hideShowNav() {
    var nav = document.querySelector('#mobileNav')
    if (nav.classList.contains("mobileNav")) {
        nav.classList.add("mobileNavHidden")
    } 
    else if (nav.classList.contains('mobileNavHidden')) {
        nav.classList.remove("mobileNavHidden")
    }
}

if (nav.classList.contains("mobileNavHidden")) {
    nav.classList.remove("mobileNavHidden")
} 
else {
    nav.classList.add("mobileNavHidden")
}

function hideShowNav() {
    var nav = document.querySelector('#mobileNav')
    if (nav.classList.contains('mobileNavHidden')) {

      nav.classList.remove("mobileNavHidden")
    } 
    else {
         nav.classList.add("mobileNavHidden")
    }
}