JS 动画只影响一个元素，几乎不起作用

Question

我正在尝试为我的下拉式大型菜单制作动画，但我遇到了一个问题，即只有当我将鼠标悬停在定制程序按钮上时它才起作用，速度很慢。我不知道为什么。有 JavaScript 更有经验的人可以帮助我吗？这是我的 JavaScript 代码，完整代码 (html,scss) 可以找到 here (codepen link):

const button = document.querySelector(".dropdown");
button.addEventListener("mouseenter", (e) => {
  document
    .querySelector(".dropdown-content")
    .classList.toggle("scale-up-ver-top");
});

Answer 1

如果你意识到，你必须去2次所以class切换，我认为这个class应该只在悬停时，不是吗？

所以把js去掉，直接在HTML

里面加上scale-up-ver-top到.dropdown-content

编辑对于 mouseenter 添加此函数，以便在鼠标离开元素时删除 class，因此它会像：

const button = document.querySelector(".dropdown");
button.addEventListener("mouseenter", (e) => {
  document
    .querySelector(".dropdown-content")
    .classList.toggle("scale-up-ver-top");
});
button.addEventListener("mouseleave", (e) => {
  document
    .querySelector(".dropdown-content")
    .classList.toggle("scale-up-ver-top");
});

Answer 2

document.querySelector(".dropdown") 仅 returns 与 dropdown class 一起找到的第一个元素。您需要 querySelectorAll，然后您需要遍历所有元素并为每个元素添加一个 mousenter 侦听器。

Answer 3

如果你提到你必须切换两次，它会起作用，因为你设置了 classList.toggle 这意味着第一次，它会添加 "scale-up-ver-top" class到元素，第二次它会找到旧的 "scale-up-ver-top" 并将其删除一个可能的解决方案是添加 (toggle, true) 这意味着它只会将 class 添加到元素。

const button = document.querySelector(".dropdown");
button.addEventListener("mouseenter", (e) => {
document
    .querySelector(".dropdown-content")
    .classList.toggle("scale-up-ver-top", true);

如果您指的是问题，您想分配所有按钮，请使用：

const button = document.querySelectorAll(".dropdown");
button.forEach(item =>{
item.addEventListener("mouseenter", (e) => {
document
    .querySelector(".dropdown-content")
    .classList.toggle("scale-up-ver-top");
  document
    .querySelector(".dropdown-content")
    .classList.toggle("scale-up-ver-top");
});
})

Answer 4

您可以做两件事来让它发挥作用。

首先，document.querySelector() 只有 return 一个元素，这回答了为什么只有自定义程序按钮有效。要解决此问题，您需要使用 document.querySelectorAll(".dropdown").

其次，在事件侦听器中，我了解到您想要 select 悬停的下拉菜单的 ".dropdown-content"。但是 document.querySelector(".dropdown-content") 只会简单地 select DOM 中的所有下拉内容。要解决此问题，您需要将 document 替换为当前的下拉列表元素。

这是我从你的 codepen re-written 得到的完整脚本：

// select all dropdown buttons
const buttons = document.querySelectorAll(".dropdown");

// loop through each button
buttons.forEach(button => {
  button.addEventListener("mouseenter", e => {

    // e.target => the one that you're hovering
    e.target
      .querySelector(".dropdown-content")
      .classList.toggle("scale-up-ver-top");
  });
});

看看这个codepen，我还添加了一个mouseleave事件。

JS 动画只影响一个元素，几乎不起作用

JS animation only effects one element and it barely works

html

javascript

css

sass