Jquery Click this or that and toggle class

Question

Im stuck on toggeling a class when there is a click event on either the parent or child item. It is about a navigation menu that can be clickable on the entire bar or just the icon.

Current situation: (according to the fiddle) When you click on the red block, the class is-active will be toggled on the .hamburger-menu class. Allowing the icon to transition via CSS. But when you click on the hamburger icon it does not toggle the class.

How can the class is-active be toggled when there is a click event on either the #menuContainer or the .hamburger-menu div?

 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

The issue is because you've added the click event handler to two elements, #menuContainer and .hamburger-menu . The latter is a child of the former, so when you click that the handler fires twice. This means that the class is toggled on, then immediately off again (or vice versa)

To fix this issue, call stopPropagation() on the event. This stops the event bubbling up the DOM and being handled twice.

 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

The problem is that the event is propagating up to the parent when you click on the hamburger menu causing the class to toggle twice and make it look like it's not working. To fix this, you need to add e.stopPropagation(); to the click function.

 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>