javascript - 单击汉堡包图标后无法正确打开菜单

Question

我无法让 fiddle 工作，但我遇到了问题 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

您已经绑定(bind)了两次 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>