时间戳

首页 > 解决方案 > Onclick 使用 Javascript 将图标旋转 180 度

javascript - Onclick 使用 Javascript 将图标旋转 180 度

问题描述

我需要选择所有三个图标，并能够在用户点击它们时让它们旋转 180 度。使用当前编写的代码，它只针对第一个箭头图标，允许它转动 180 度并返回。然而，当我单击其他两个图标时，它们不会旋转/即使我没有单击第一个图标，第一个图标也会旋转。

const arrowFlip = () => {
  let div = document.getElementById("nav__links");
  let icon = document.getElementById("icon");
  let open = false;

  div.addEventListener("click", function() {
    if (open) {
      icon.className = "menu-arrow-down";
    } else {
      icon.className = "menu-arrow-down open";
    }

    open = !open;
  });
};
arrowFlip();
.menu-arrow-down {
  transform: rotate(0deg);
  transition: 1s linear;
}

.menu-arrow-down.open {
  transform: rotate(180deg);
  transition: 1s linear;
}
<ul id="nav__links" class="nav__links">
  <div class="desktop__nav">
    <li class="parent">
      <a href="#">Product</a>

      <img id="icon" class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" />
      <ul class="sub-menu">
        <li>Overview</li>
        <li>Pricing</li>
        <li>Marketplace</li>
        <li>Features</li>
        <li>Integrations</li>
      </ul>
    </li>
    <li class="parent">
      <a href="#">Company</a>
      <img id="icon" class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" />
      <ul class="sub-menu">
        <li>About</li>
        <li>Team</li>
        <li>Blog</li>
        <li>Careers</li>
      </ul>
    </li>
    <li class="parent">
      <a href="#">Connect</a>
      <img id="icon" class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" />
      <ul class="sub-menu">
        <li>Contact</li>
        <li>Newsletter</li>
        <li>LinkedIn</li>
      </ul>
    </li>
  </div>

标签： javascript

解决方案

ID 必须是唯一的。

委托点击 - 它更简单

document.getElementById("nav__links").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains('menu-arrow-down')) { // make sure we only target elements with this class
    tgt.classList.toggle('open');
    // here you can test tgt.classList.contains('open') to see the state
  }
});
.menu-arrow-down {
  transform: rotate(0deg);
  transition: 1s linear;
}

.menu-arrow-down.open {
  transform: rotate(180deg);
  transition: 1s linear;
}
<ul id="nav__links" class="nav__links">
  <div class="desktop__nav">
    <li class="parent">
      <a href="#">Product</a>

      <img class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" />
      <ul class="sub-menu">
        <li>Overview</li>
        <li>Pricing</li>
        <li>Marketplace</li>
        <li>Features</li>
        <li>Integrations</li>
      </ul>
    </li>
    <li class="parent">
      <a href="#">Company</a>
      <img class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" />
      <ul class="sub-menu">
        <li>About</li>
        <li>Team</li>
        <li>Blog</li>
        <li>Careers</li>
      </ul>
    </li>
    <li class="parent">
      <a href="#">Connect</a>
      <img class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" />
      <ul class="sub-menu">
        <li>Contact</li>
        <li>Newsletter</li>
        <li>LinkedIn</li>
      </ul>
    </li>
  </div>

推荐阅读