无法让移动导航重新出现
无法让移动导航重新出现
提问于 2017-06-21 04:57:22
我试图通过添加和删除一个带有display:none属性的css类来切换导航栏的显示。我的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>.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")
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-06-21 05:05:33
nav仍然具有mobileNav类，因此第一个if-语句将被触发，并且不允许运行else-if-语句。您可以将其更改为先检查mobileNavHidden是否在那里，然后再决定如何处理它。
例如
if (nav.classList.contains("mobileNavHidden")) {
nav.classList.remove("mobileNavHidden")
}
else {
nav.classList.add("mobileNavHidden")
}Stack Overflow用户
发布于 2017-06-21 05:07:43
改变你的功能
function hideShowNav() {
var nav = document.querySelector('#mobileNav')
if (nav.classList.contains('mobileNavHidden')) {
nav.classList.remove("mobileNavHidden")
}
else {
nav.classList.add("mobileNavHidden")
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44662870
复制相关文章
相似问题
腾讯云开发者
