Question

当父项目或子项目上有点击事件时，我仍然坚持使用类。这是一个导航菜单，可以在整个栏上点击，也可以只在图标上点击。

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

当is-active或#menuContainer 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并被处理两次。

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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>

Jquery单击此或那个并切换类

2 个答案: