jquery - '响应式菜单 jquery html 和 css

Question

我正在尝试使用 css html 和一些 jQuery 制作响应式菜单，我使用带有 css 的复选框来打开或关闭菜单，我还想在单击任何 anchor 时关闭菜单，(它有效)，但如果我再次单击菜单图标打开它，它每次都运行缓慢，直到它出现的时间太长。

我认为问题出在点击事件上，但我不知道如何解决。

谢谢你的帮助

$(document).ready(function() {
  click_events();
});

function click_events() {
  $("#menu ul li a").click(function() {
    $(this).parent().parent().parent().animate({
      "margin-left": "-100%"
    });
    $("#btn-menu").prop("checked", false);
    $("label").click(function() {
      if ($("#btn-menu").prop("checked", true)) {
        $("#menu").animate({
          "margin-left": "0"
        });
      }
    })
  });
}

HTML

<header class="header">
  <div class="container">
    <div class="img-logo-container">
      <img src="images/logo.png" alt="">
    </div>
    <input type="checkbox" id="btn-menu">
    <label for="btn-menu"><i class="fas fa-bars"></i></label>
    <nav class="menu" id="menu">
      <ul>
        <li><a href="#episodes">Episodios</a></li>
        <li><a href="#invited">Invitados</a></li>
        <li><a href="#topics">Temas</a></li>
        <li><a href="#new">Novedades</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS

@media screen and (max-width: 991px) {
  header label {
    display: block;
  }
  header nav {
    position: fixed;
    background: #ffffff;
    z-index: 1000;
    width: 100%;
    left: 0;
    top: 70px;
    height: 100vh;
    overflow-y: auto;
    margin-left: -100%;
  }
  #btn-menu:checked~.menu {
    margin-left: 0;
    transition: 0;
  }
  #btn-menu:not(:checked)~.menu {
    margin-left: -100%;
    transition: 0;
  }
  header nav ul li {
    display: block;
    text-align: center;
    border-bottom: 1px solid black;
    padding: 20px 0;
    margin-left: 15px;
    margin-right: 15px;
  }
  #btn-menu:checked~.menu {
    display: block;
    width: 100%;
  }
}

Answer 1

这是因为每次单击 #menu ul li a 时都绑定(bind)了 label 的 click 事件。解决方案是将绑定(bind)移出 click 处理程序。

所以代替

function click_events() {
  $("#menu ul li a").click(function() {
    $(this).parent().parent().parent().animate({
      "margin-left": "-100%"
    });
    $("#btn-menu").prop("checked", false);
    $("label").click(function() {
      if ($("#btn-menu").prop("checked", true)) {
        $("#menu").animate({
          "margin-left": "0"
        });
      }
    })
  });
}

应该是

function click_events() {
  $("#menu ul li a").click(function() {
    $(this).parent().parent().parent().animate({
      "margin-left": "-100%"
    });
    $("#btn-menu").prop("checked", false);
  });
  $("label").click(function() {
    if ($("#btn-menu").prop("checked", true)) {
      $("#menu").animate({
        "margin-left": "0"
      });
    }
  })
}