如何在汉堡包第二次点击时将导航栏显示设为无？

我正在开发一个响应式网站，当点击汉堡包时，显示一个导航栏，但是当第二次点击汉堡时，我无法将列表显示设置为无。如何在汉堡包第二次点击时将导航栏显示设为无？

HTML

<div class=""container hamburger" onclick="toggleHamburger(this)" id="hamburger"> 
    <div class="bar1"></div> 
    <div class="bar2"></div> 
    <div class="bar3"></div> 
</div> 
<ul class="col-m-9 navlist" id="navlist"> 
    <li><a id="HTML" href="#">HTML</a></li> 
    <li><a id="CSS" href="#">CSS</a></li> 
    <li><a id="JS" href="#">JS</a></li> 
    <li><a id="FAQ" href="#">FAQ</a></li> 
    <li><a id="About" href="#">About</a></li>

function toggleHamburger(hamburg) { 
    hamburg.classList.toggle("change"); 
    displayNavList(); 
} 
function displayNavList(){ 
    var navList = document.getElementById("navlist"); 
    navList.style.display = "block"; 
}

所以，基本上我想知道，如果在JS任何方式调用另一个函数的汉堡包第二次点击时。查看AdiCodes上的问题，用汉堡，它可以打开导航列表，但不能关闭它。

来源

2017-03-27 Aditya Kumar

你没有采取任何行动来调用另一个函数第二次 – Maruf

使用计数器，在计数器= 2，打电话给你的另一功能。 – Ishu

这就是你想要达到的目标吗？还是我误解了这个问题？

var hamburger = document.querySelector('#hamburger'), 
 
navList = document.querySelector('#navlist'); 
 

 

 
var toggleNav = function() { 
 
    hamburger.classList.toggle('js-active') 
 
    navList.classList.toggle('js-active') 
 
} 
 
hamburger.addEventListener('click', toggleNav)

#hamburger { 
 
color: red; 
 
} 
 

 
.js-active#hamburger { 
 
color: green; 
 
} 
 

 
#navlist { 
 
    display: none; 
 
} 
 

 
.js-active#navlist { 
 
    display: block; 
 
}

<div class="container hamburger" id="hamburger"> 
 
HAMBURGER 
 
</div> 
 
<ul class="col-m-9 navlist" id="navlist"> 
 
    <li><a id="HTML" href="#">HTML</a></li> 
 
    <li><a id="CSS" href="#">CSS</a></li> 
 
    <li><a id="JS" href="#">JS</a></li> 
 
    <li><a id="FAQ" href="#">FAQ</a></li> 
 
    <li><a id="About" href="#">About</a></li> 
 
</ul>

来源

2017-03-27 12:18:02

是的，这正是我想要的，谢谢！ –

你能不能也解释一下JS的查询选择器代码的使用，因为我是JS新手？ –

当然，它允许你基于他的css选择器来定位一个dom元素，在这种情况下，你也可以使用document.getElementById（'navlist'）如果你需要定位多个元素，你也可以使用'document .querySelectorAll' –

你可以定义一个全局计数器

var count = 0;

第一次点击它会显示你的资产净值，而第二次就会切换。

var count = 0; 
 
function toggleHamburger(hamburg) { 
 
    if(count >= 1){ 
 
     var navList = document.getElementById("navlist"); 
 
     navList.style.display = "none"; 
 
    }else{ 
 
     hamburg.classList.toggle("change"); 
 
     displayNavList(); 
 
    } 
 
    count ++; 
 
} 
 
function displayNavList(){ 
 
    var navList = document.getElementById("navlist"); 
 
    navList.style.display = "block"; 
 
}

<div class="container hamburger" onclick="toggleHamburger(this)" id="hamburger"> 
 
    <div class="bar1">test</div> 
 
    <div class="bar2">test</div> 
 
    <div class="bar3">test</div> 
 
</div> 
 
<ul class="col-m-9 navlist" id="navlist" style="display: none;"> 
 
    <li><a id="HTML" href="#">HTML</a></li> 
 
    <li><a id="CSS" href="#">CSS</a></li> 
 
    <li><a id="JS" href="#">JS</a></li> 
 
    <li><a id="FAQ" href="#">FAQ</a></li> 
 
    <li><a id="About" href="#">About</a></li>

来源

2017-03-27 12:02:51

我不认为这回答了这个问题，这使得它在第一次点击时不做任何事情，第二次点击时显示它，并且随后每次点击都不做任何事情。 – SpoonMeiser

谢谢，你是对的我现在eddited :) –

你为什么不显示/隐藏与类的列表，然后您可以切换该类在点击处理程序太：

function toggleHamburger(hamburg) { 
    hamburg.classList.toggle("change"); 
    var navList = document.getElementById("navlist"); 
    navList.classList.toggle("shown"); 
}

随着CSS：

#navlist:not(.shown) { 
    display: none; 
}

来源

2017-03-27 12:13:14 SpoonMeiser

如何在汉堡包第二次点击时将导航栏显示设为无？

回答

相关问题