使用 vanilla JavaScript 切换类列表的问题

Question

为什么此 JavaScript 不能在单击时切换change类？

我最初遵循了创建可切换汉堡菜单的教程，该菜单有效，但我想尝试将 HTML 中的 onClick 属性（最初添加到类hamburger-menu div ）转换为单独文件中的一个。 当我点击汉堡菜单时，它什么也没做。

我正在尝试什么：

 let hamburger = document.querySelector('.hamburger-container'); hamburger.onClick = () => { hamburger.classList.toggle('change'); }

 .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } /* Rotate first bar */ .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } /* Fade out the second bar */ .change .bar2 { opacity: 0; } /* Rotate last bar */ .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; }

 <div class="hamburger-container"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>

另外这里有一个 JS Fiddle——菜单设置为在常规视图中不显示，但在移动视图中可见。

Answer 1

CSS transforms缺少transitions ，事件处理程序应使用event.target或event.currentTarget 。

演示

 let hamburger = document.querySelector('.hamburger'); hamburger.onclick = toggleChange; function toggleChange(event) { event.currentTarget.classList.toggle('change'); }

 .hamburger { width: 35px; height: 35px; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } /* Rotate first bar */ .change .bar1 { transform: rotate(-45deg) translate(-9px, 6px); transition: transform 0.75s; } /* Fade out the second bar */ .change .bar2 { opacity: 0; transition: opacity 0.25s; } /* Rotate last bar */ .change .bar3 { transform: rotate(45deg) translate(-8px, -8px); transition: transform 0.75s; }

 <div class="hamburger"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>

Answer 2

您应该使用onclick而不是onClick 。

 let hamburger = document.querySelector('.hamburger-container'); hamburger.onclick = () => { hamburger.classList.toggle('change'); }

 .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } /* Rotate first bar */ .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } /* Fade out the second bar */ .change .bar2 { opacity: 0; } /* Rotate last bar */ .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; }

 <div class="hamburger-container"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>