單擊漢堡圖標後無法正常打開菜單

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

我display:none;上#menu，當我點擊.hamburger它給它display:block;我不知道究竟是什麼做的是。還有一種方法可以結合這個js嗎？

Answer 1

您綁定了兩次click事件，第一個嘗試顯示該元素，然後第二個人在仍然顯示時試圖隱藏它，從而始終顯示該元素。試試這個代碼

$(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>