ハンバーガーアイコンをクリックしてメニューを正しく開くことができません

Question

私はフィドルが働くことができませんが、問題はライブhereです。

アイコンをクリックすると、メニューが短時間表示されてからもう一度消えます。私はそれをクリックすると、閉じるためにもう一度クリックするまで開かれたままになると私が言っていたjavascriptと思った。

HTML

<div class="hamburger hamburger--spin" tabindex="0" 
    aria-label="Menu" role="button" aria-controls="navigation"> 
    <div class="hamburger-box"> 
     <div class="hamburger-inner"></div> 
    </div> 
</div> 

<nav id="menu">Content</nav> 

Javascriptを

$(".hamburger").click(function() { 
    $("#menu").fadeIn("fast"); 
}); 
$(".hamburger").click(function() { 
    $("#menu").fadeOut("fast"); 
}); 

var $hamburger = $(".hamburger"); 
$hamburger.on("click", function(e) { 
    $hamburger.toggleClass("is-active"); 
    // Do something else, like open/close menu 
}); 

私は#menu上display:none;持っていると私は.hamburgerをクリックしたときには、display:block;はそれを与え、私は正確に何をしているのかわからないんだけど。また、このjsを組み合わせる方法はありますか？

Answer 1

clickイベントを2回バインドしました。最初のイベントは要素を表示しようとし、次に2番目のイベントは表示中に非表示にして、常に表示します。

$(function() { 
 
    $(".hamburger").click(function() { 
 
    if ($("#menu").is(":hidden")) 
 
     $("#menu").fadeIn("fast"); 
 
    else 
 
     $("#menu").fadeOut("fast"); 
 
    }); 
 

 
    var $hamburger = $(".hamburger"); 
 
    $hamburger.on("click", function(e) { 
 
    $hamburger.toggleClass("is-active"); 
 
    // Do something else, like open/close menu 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hamburger hamburger--spin" tabindex="0" aria-label="Menu" role="button" aria-controls="navigation"> 
 
    <div class="hamburger-box"> 
 
    <div class="hamburger-inner">INner</div> 
 
    </div> 
 
</div> 
 

 
<nav id="menu">Content</nav>