jQuery单击此或那个并切换类

Question

当父项或子项发生点击事件时，我就停留在切换类上。 它是关于一个导航菜单，可在整个栏或仅单击图标上单击。

当前情况：（ 根据小提琴）单击红色方框时，将在.hamburger-menu类上切换is-active类。 允许图标通过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>