ハンバーガーでもう一度クリックするとnav ul表示をnoneに設定するにはどうすればいいですか？

Question

ハンバーガーをクリックするとnav ulが表示される反応性の高いWebサイトを開発していますが、ハンバーガーを2回目にクリックするとリスト表示を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の問題を参照してください、ハンバーガーで、navリストを開くことはできますが、それを閉じることはできません。

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; 

にあなたがそれはあなたのNAVが表示されますクリックする最初の時間を定義することができ、2回目はそれが切り替わります。

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