Jquery 单击这个或那个并切换类

Question

当父项或子项上有点击事件时，我坚持切换类。它是关于一个导航菜单，可以在整个栏或图标上单击。

目前情况： (according to the fiddle) 当您单击红色块时，is-active 类将在 .hamburger-menu 类上切换。允许图标通过 CSS 转换。 但是，当您单击汉堡包图标时，它不会切换类。

当#menuContainer 或.hamburger-menu div 上有点击事件时，如何切换is-active 类？

jQuery(function($) {
  $(document).ready(function() {
    $("#menuContainer, .hamburger-menu").click(function() {
      $(".hamburger-menu").toggleClass("is-active");
    });
  });
});

.menu_container {
  display: block;
  position: absolute;
  left: 45%;
  top: 45%;
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

.menu_container .menu-active {
  background-color: blue;
}

.hamburger-menu {
  display: inline-block;
  position: absolute;
  left: 35%;
  top: 45%;
  margin: 0 auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger-menu:hover {
  cursor: pointer;
}

.hamburger-menu span {
  display: block;
  width: 40px;
  max-width: 100%;
  height: 3px;
  background-color: #414042;
  margin-bottom: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger-menu.is-active span:nth-child(2) {
  display: none;
}

.hamburger-menu.is-active span:nth-child(1) {
  -webkit-transform: translateY(4.5px) rotate(45deg);
  -ms-transform: translateY(4.5px) rotate(45deg);
  -o-transform: translateY(4.5px) rotate(45deg);
  transform: translateY(4.5px) rotate(45deg);
}

.hamburger-menu.is-active span:nth-child(3) {
  -webkit-transform: translateY(-4.5px) rotate(-45deg);
  -ms-transform: translateY(-4.5px) rotate(-45deg);
  -o-transform: translateY(-4.5px) rotate(-45deg);
  transform: translateY(-4.5px) rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuContainer" class="menu-trigger menu_container">
  <div class="hamburger-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Answer 1

问题是因为您已将 click 事件处理程序添加到两个元素，#menuContainer 和 .hamburger-menu。后者是前者的子代，因此当您单击该处理程序时会触发两次。这意味着该类已打开，然后又立即关闭（反之亦然）

要解决此问题，请在活动上致电 stopPropagation()。这会阻止事件在 DOM 中冒泡并被处理两次。

jQuery(function($) { // Note you only need one document.ready handler here
  $("#menuContainer, .hamburger-menu").click(function(e) {
    e.stopPropagation();
    $(".hamburger-menu").toggleClass("is-active");
  });
});

.menu_container {
  display: block;
  position: absolute;
  left: 45%;
  top: 45%;
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

.menu_container .menu-active {
  background-color: blue;
}

.hamburger-menu {
  display: inline-block;
  position: absolute;
  left: 35%;
  top: 45%;
  margin: 0 auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger-menu:hover {
  cursor: pointer;
}

.hamburger-menu span {
  display: block;
  width: 40px;
  max-width: 100%;
  height: 3px;
  background-color: #414042;
  margin-bottom: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger-menu.is-active span:nth-child(2) {
  display: none;
}

.hamburger-menu.is-active span:nth-child(1) {
  -webkit-transform: translateY(4.5px) rotate(45deg);
  -ms-transform: translateY(4.5px) rotate(45deg);
  -o-transform: translateY(4.5px) rotate(45deg);
  transform: translateY(4.5px) rotate(45deg);
}

.hamburger-menu.is-active span:nth-child(3) {
  -webkit-transform: translateY(-4.5px) rotate(-45deg);
  -ms-transform: translateY(-4.5px) rotate(-45deg);
  -o-transform: translateY(-4.5px) rotate(-45deg);
  transform: translateY(-4.5px) rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuContainer" class="menu-trigger menu_container">
  <div class="hamburger-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Answer 2

问题是，当您单击汉堡菜单时，该事件正在传播到父级，导致该类切换两次并使其看起来无法正常工作。要解决这个问题，您需要在点击函数中添加e.stopPropagation();。

jQuery(function($) {
  $(document).ready(function() {
    $("#menuContainer, .hamburger-menu").click(function(e) {
      $(".hamburger-menu").toggleClass("is-active");
      e.stopPropagation();
    });
  });
});

.menu_container {
  display: block;
  position: absolute;
  left: 45%;
  top: 45%;
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

.menu_container .menu-active {
  background-color: blue;
}

.hamburger-menu {
  display: inline-block;
  position: absolute;
  left: 35%;
  top: 45%;
  margin: 0 auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger-menu:hover {
  cursor: pointer;
}

.hamburger-menu span {
  display: block;
  width: 40px;
  max-width: 100%;
  height: 3px;
  background-color: #414042;
  margin-bottom: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger-menu.is-active span:nth-child(2) {
  display: none;
}

.hamburger-menu.is-active span:nth-child(1) {
  -webkit-transform: translateY(4.5px) rotate(45deg);
  -ms-transform: translateY(4.5px) rotate(45deg);
  -o-transform: translateY(4.5px) rotate(45deg);
  transform: translateY(4.5px) rotate(45deg);
}

.hamburger-menu.is-active span:nth-child(3) {
  -webkit-transform: translateY(-4.5px) rotate(-45deg);
  -ms-transform: translateY(-4.5px) rotate(-45deg);
  -o-transform: translateY(-4.5px) rotate(-45deg);
  transform: translateY(-4.5px) rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuContainer" class="menu-trigger menu_container">
  <div class="hamburger-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>