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事件绑定两次，第一个尝试显示该元素，然后第二个尝试隐藏它，同时它仍然显示，从而始终显示它。试试这段代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: