Question

我正在尝试使用subnav为JavaScript制作动画。我想显示所有subnavs，类似于'mega menu'类型的nav。目前，它会逐渐消失，但是从最远的subnav开始，会产生渐变效果。我希望他们都同时开始。

如何使它们同时动画？

有关HTML和CSS的信息，请参见Codepen

这是JS块：

  nav.forEach(elem => {
    elem.addEventListener('mouseenter', () => {
      const subnav = document.querySelectorAll('.subnav-block');
      subnav.forEach(sub => {
        sub.classList.add('display-block');
        setTimeout(() => {
          sub.style.opacity = 1;
        }, 100);
      });
    });

    elem.addEventListener('mouseleave', () => {
      const subnav = document.querySelectorAll('.subnav-block');
      subnav.forEach(sub => {
        sub.classList.remove('display-block');
        sub.style.opacity = 0;
      });
    });
  });

Answer 1

您的JavaScript没问题。所有子导航都同时进行动画处理：问题在于它们重叠。现在使用CSS，第一个子导航位于其他两个导航之后，第二个在第三个导航之后，如下所示：

[subnav 1 [subnav 2 [subnav 3]]]

您可以使用浏览器的检查元素选项进行验证。

当第二个和第三个子导航变为透明时，您可以看到它们后面的第一个子导航，因此它们显得更暗。您需要更改CSS，以免它们重叠。

Answer 2

尝试将悬停选择器更改为

.nav > li > a:hover {
    color: yellow;
}

此操作仅将悬停效果应用于属于li的直接子代的锚标签，这些锚子是具有nav类的元素的直接子代。

同时设置动画导航菜单下拉菜单

2 个答案: