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

Question

当父项或子项上有单击事件时，Im会继续切换类。它是关于一个导航菜单，可以点击整个酒吧或只是图标。

当前情况:单击红色块时， (根据小提琴)将在.hamburger-menu类上切换类is-active。允许图标通过CSS转换。但是当你点击汉堡包图标时，它不会切换这个类。

在is-active或.hamburger-menu div上都有单击事件时，如何切换类.hamburger-menu？

​

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

问题在于您已经将单击事件处理程序添加到两个元素( #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();添加到click函数中。

​

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>

​