햄버거에서 두 번째 클릭 할 때 nav ul 표시를 none으로 설정하는 방법은 무엇입니까?

Question

햄버거를 클릭하면 nav ul이 표시되는 반응 형 웹 사이트를 개발하고 있지만 햄버거를 두 번 클릭하면 목록 표시를 none으로 설정할 수 없었습니다.

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> 

JS

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

그래서, 기본적으로 내가 다른 함수를 호출하는 JS 어떤 방법이 있는지 햄버거 두 번 클릭 할 때 알고 싶어요 . AdiCodes에있는 문제를보고 햄버거와 함께 탐색 목록을 열 수는 있지만 닫을 수는 없습니다.

Answer 1

달성하려는 목표는 무엇입니까? 또는 나는 그 질문을 오해 했습니까?

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>

Answer 2

당신은 글로벌 카운터

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>

Answer 3

왜 당신은/클래스와 목록을 숨길 표시되지 않습니다, 당신은 너무 당신의 클릭 핸들러에서 그 클래스를 전환 할 수 있습니다 다음 CSS와

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

를 :

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