时间戳

首页 > 解决方案 > 箭头翻转功能半工作，几乎完整的 JS

javascript - 箭头翻转功能半工作，几乎完整的 JS

问题描述

我创建了一个函数，允许用户单击下拉“隐藏”div/子菜单的可见 div。在可见 div 的右侧有一个箭头图像。总共有 5 个可见的 div 和 5 个箭头。当“隐藏”的 div 打开时，我需要让箭头旋转 180 度，并在关闭时旋转回 0 度。编写当前代码后，我可以选择要旋转的第一个箭头图像。如果我要单击第二个 div，我希望第二个箭头旋转，第一个箭头正在获取脚本。我相信会使用 querySelectorAll，但控制台不会选择它。任何提示总是非常感谢！

//
const questionBox = document.getElementsByClassName("question__container");
const arrows = document.querySelector(".question__container--img");

[...questionBox].forEach((el) =>
  el.addEventListener("click", (event) => {
    const subMenu = event.target.parentElement.parentElement.querySelector(
      ".options__container"
    );
    subMenu.classList.toggle("open");
    if (subMenu.classList.contains("open")) {
      arrows.style.transform = "rotate(180deg)";
    } else {
      arrows.style.transform = "rotate(0deg)";
    }
  })
);
//

第二个 div 已打开，但第一个箭头获取函数调用

标签： javascript

解决方案

基于您当前的逻辑，这就是您可以做的。

  • 获取所有箭头querySelectorAll
  • 创建一个collapseAllArrows基本上遍历所有箭头并折叠它们的函数。
  • 当单击任何 div 元素并subMenu切换该元素的 时，open然后调用该collapseAllArrows函数以折叠所有展开的箭头。
  • 找到单击的 div 元素的箭头并将其展开。

你的代码应该是这样的

const questionBox = document.getElementsByClassName("question__container");
const arrows = document.querySelectorAll(".question__container--img");

const collapseAllArrows = () => {
  arrows.forEach(arrow => arrow.style.transform = "rotate(0deg)";)
}

[...questionBox].forEach((el) =>
  el.addEventListener("click", (event) => {
    const subMenu = event.target.parentElement.parentElement.querySelector(
      ".options__container"
    );

    subMenu.classList.toggle("open");

    if (subMenu.classList.contains("open")) {
      collapseAllArrows();
      const currentArrow = el.querySelector(".question__container--img");
      currentArrow.style.transform = "rotate(180deg)";
    }
  })
);

推荐阅读