JS 动画只影响一个元素，几乎没有效果

Question

我正在尝试为我的下拉式大型菜单制作动画，但我遇到了一个问题，即只有当我将鼠标悬停在定制器按钮上时它才有效，缓慢。我不知道为什么。有更多 JavaScript 经验的人可以帮助我吗？ 这是我的 JavaScript 代码，完整代码（html，scss）可以在here（codepen 链接）找到：

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

Answer 1

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

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

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

这是我从你的 codepen 重写的完整脚本：

// 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 事件。

Answer 2

document.querySelector(".dropdown") 仅返回使用dropdown 类找到的第一个元素。你需要querySelectorAll，然后你需要遍历所有元素并为每个元素添加一个mouseenter监听器。

Answer 3

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

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

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

所以去掉这个js，直接在HTML中将scale-up-ver-top添加到.dropdown-content

编辑 为mouseenter 添加此函数，以便在鼠标离开元素时删除该类，所以它会像：

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");
});