作者：mobiledu2502928043 | 来源：互联网 | 2023-01-30 11:48
当父项目或子项目上出现点击事件时,我会坚持使用类.它是关于导航菜单,可以在整个栏上点击或只是图标.
现状:( 根据小提琴)
当你点击红色块时,课程is-active将在课堂上切换.hamburger-menu.允许图标通过CSS进行转换.但是当你点击汉堡包图标时,它不会切换课程.
is-active当div #menuContainer或.hamburger-menudiv 上有click事件时,如何切换类？
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);
}
1> Rory McCross..：
问题是因为您已将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);
}
京公网安备 11010802041100号