单击汉堡图标后无法正常打开菜单

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>