toggle() 没有像预期的那样工作答案

【问题标题】：toggle() isnt't working like it suppose to betoggle() 没有像预期的那样工作
【发布时间】：2023-01-01 00:25:34
【问题描述】：

当我单击汉堡包菜单按钮时，我希望.menu-btn.menu-mob菜单按钮和导航菜单都必须 is-active类和.sqr在其他两个处于活动状态时拥有类.hidden。这就是为什么我使用 toggle() 来切换所有这些类，但由于某种原因它不起作用。

Link to all code in repo

请注意，我正在使用 react 和 tailwind 以及一些 vanilla css

const showNav = () => {
    const menuBtn = document.querySelector('.menu-btn')
    const navbar = document.querySelector('.menumob')
    const sqr = document.querySelector('.sqr')

    menuBtn.addEventListener('click', () => {
      menuBtn.classList.toggle('is-active')
      navbar.classList.toggle('is-active')
      sqr.classList.toggle('hidden')
    })

 <button class="menu-btn hamburger  absolute top-0 right-0 md:hidden" onClick={showNav()}>
            <div class="bar"></div>
 </button>

 .hamburger.is-active::before {
    transform: rotate(-45deg) translate(-8px, 6px);
 }

 .hamburger.is-active::after {
    transform: rotate(45deg) translate(-9px, -8px);
 }

 .hamburger.is-active .bar {
    opacity: 0;
 }


 .menumob {
    position: relative;
    top:0;
    left:100%;
    transition: 0.4s;
 }

 .menumob.is-active {
    left:0;
 }

【问题讨论】：

如果你点击汉堡菜单两次，它会起作用吗？

标签： javascript css reactjs tailwind-css

【解决方案1】：

在 onclick 事件中设置事件侦听器是个坏主意。每次单击时，都会创建一个新的侦听器，导致代码在每次单击时触发多次。

在您的代码中，您第一次单击时将创建事件侦听器，但侦听器中的代码不会运行。第二次单击时，侦听器中的代码应该会运行，但会创建另一个侦听器。第三次单击时，侦听器中的代码将运行两次（切换类两次），并添加另一个侦听器。（并为每次点击重复。）

根本不需要事件侦听器，因为 showNav 函数仅在单击汉堡菜单项时运行 - 因为 HTML 中的 onClick={showNav()}。尝试将代码更改为此，看看它是否有效：

const showNav = () => {
  const menuBtns = document.querySelector('.menu-btn')
  const navbars = document.querySelector('.menumob')
  const sqrs = document.querySelector('.sqr')

  menuBtn.classList.toggle('is-active')
  navbar.classList.toggle('is-active')
  sqr.classList.toggle('hidden')
};

另请注意，document.querySelector 仅返回第一个匹配元素，因此如果您有多个具有类 .menu-btn、.menumob 或 .sqr 的元素，则并非所有元素都将被更新。

【讨论】：