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

的问题是，因为你已经添加单击事件处理程序，以两个元素，#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>