Onclick 使用 Javascript 将图标旋转 180 度

Question

我需要 select 所有三个图标，并且当用户点击它们时能够让它们旋转 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>

Answer 1

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>

Answer 2

您可以将事件侦听器添加到所有箭头，这样您就不需要 id：

 let allArrows = document.querySelectorAll(".menu-arrow"); allArrows.forEach(arrow => { arrow.addEventListener('click', function() { this.className = this.className === "menu-arrow-down open"? "menu-arrow-down": "menu-arrow-down open"; }); });

 .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="https://placekitten.com/50/50" 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="https://placekitten.com/50/50" 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="https://placekitten.com/50/50" alt="arrow" /> <ul class="sub-menu"> <li>Contact</li> <li>Newsletter</li> <li>LinkedIn</li> </ul> </li> </div>

Answer 3

就像其他人写道：一个 id 必须是唯一的。 此外，您不需要它，因为您只需使用事件的目标并切换其 class .open如果它具有 class menu-arrow 。

 document.getElementById("nav__links").addEventListener("click", function(event) { if (event.target.className.includes('menu-arrow')) { event.target.classList.toggle('open'); } });

 .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="https://via.placeholder.com/160x120" 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="https://via.placeholder.com/160x120" 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="https://via.placeholder.com/160x120" alt="arrow" /> <ul class="sub-menu"> <li>Contact</li> <li>Newsletter</li> <li>LinkedIn</li> </ul> </li> </div>

Answer 4

这是因为id属性是唯一的，不能与多个元素一起使用。 getElementById将返回第一个id为icon的元素，产生您所看到的结果。 要解决此问题，我建议将参数传递给您的 function，无论是event还是数字。 在此示例中，我将使用一个数字：

 let open = false; const arrowFlip = (number) => { let icon = document.getElementsByClassName("icon")[number]; if (open) { icon.className = "icon menu-arrow-down"; } else { icon.className = "icon menu-arrow-down open"; } open =;open; };

 .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="icon" onclick="arrowFlip(0)" 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="icon" onclick="arrowFlip(1)"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="icon" onclick="arrowFlip(2)"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>

每个图像上的onclick()都会触发这个 function，发送一个数字参数，允许引用正确的箭头。 然后，当它翻转时，代码将知道用户正在引用什么图像。