同一个功能点击事件如何设置不同的延时

Question

关于我在我的网站上实施的 javascript 代码，我需要一些帮助。基本上当点击固定 header 上的汉堡包时，会显示全屏移动菜单，但在它完全出现之前我设置了一个持续 0.25 秒的动画。通过单击汉堡包，我触发 class header-proper-state 将 header 位置设置为 relative 以便能够在 [=13= 上看到和使用汉堡包] 显示菜单时的位置。除了 .25 秒 header 丢失并在全屏菜单完全显示之前产生令人不快的视觉效果外，一切正常。作为解决方法，我为 toggle 设置了 300 毫秒的延迟，并且在菜单完全显示之前我没有视觉问题，但是当我再次单击汉堡包关闭按钮时，我必须再等待 300 毫秒才能看到 header 在固定位置。因此，我尝试将 toogle 更改为 add，并在单击关闭按钮 is-active 并使用 remove 时为新功能设置不同的延迟（如 40）删除将 header 定位在 relative 上的 class，而我们显示的是 meby，以便纠正延迟，但我从控制台收到错误并且没有 class删除，基本上它说 close 是空的。我错过了什么？

这是我的代码：

document.addEventListener("DOMContentLoaded", function(event) {

  let hamb = document.querySelector('.hamburger')
  let bdy = document.querySelector('body')
  let close = document.querySelector('.is-active')

  hamb.addEventListener('click', function(e) {
    this.classList.toggle('is-active');
    setTimeout(function() {
      document.querySelector('.mobile-menu').classList.toggle('mob-menu-show')
    }, 50);
    setTimeout(function() {
      document.querySelector('.mob-menu-base').classList.toggle('mob-menu-base-anim')
    }, 50);
    setTimeout(function() {
      document.querySelector('.mobile-menu-content').classList.toggle('mobile-menu-animations')
    }, 100);
    setTimeout(function() {
      document.querySelector('.header-wrapper').classList.add('header-proper-state')
    }, 300);
    bdy.classList.toggle('prevent-scroll');
  });

  close.addEventListener('click', function(e) {
    setTimeout(function() {
      document.querySelector('.header-wrapper').classList.remove('header-proper-state')
    }, 40);
  });

});

Answer 1

变量close设置在代码的开头。届时它将是 null 因为没有元素处于活动状态 class.

它似乎从未更改过，所以当您对其执行 addEventListener 时，您会收到错误消息。

变量 close 每次使用前都需要更新，以确保它指向具有 class="is-active".

的当前元素

同一个功能点击事件如何设置不同的延时

How to set different delays for the same function click event

javascript

css

function

delay

toggle