javascript - 无法让移动导航重新出现

Question

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

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

.mobileNavHidden {
    display: none;
}

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")
    }
}

Answer 1

nav 仍然有 mobileNav 类，所以第一个 if 语句被触发并且不允许 else-if 语句运行。您可以先更改它以检查 mobileNavHidden 是否存在，然后再决定如何处理它。

前

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