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

Answer 2

更改你的功能

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

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

无法让移动导航重新出现

2 个答案: