点击Accordion时旋转箭头

Question

单击父级手风琴div时，如何使此箭头旋转？任何帮助都将是美妙的。这个想法是，当你点击手风琴时，作为svg文件的箭头应该旋转，然而我似乎无法让它在上工作

HTML

<button class="accordion">Design <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste veritatis maiores doloribus ex, culpa tenetur?</p></div>
<button class="accordion">Development <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At rerum a voluptate nesciunt! Quam, inventore.></div>
<button class="accordion">Search Engine Optimisation <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, blanditiis. Corporis maxime eum nemo delectus.</p></div>
<button class="accordion">Progressive Web Apps <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa consequuntur obcaecati iste odit vero mollitia.</p></div>

CSS

#services .accordion{
font-size:1rem;
background-color:rgba(245, 246, 250,0.4);
cursor:pointer;
padding:18px;
width:100%;
border:none;
outline:none;
display:flex;
justify-content:space-between;
width:68vw;
text-align:right;
}
#services .active, .accordion:hover{
background-color:rgba(245, 246, 250,0.4);
color:rgba(0, 151, 230,1.0);
}
#services .panel{
background-color:rgba(245, 246, 250,0.4);
display:none;
width:100%;
justify-content:center;
text-align:center;
}
#services .caret{
width:12px;
}

JS-

/*accordion*/
var acc = document.getElementsByClassName("accordion");
var arrow = document.getElementsByClassName("caret")
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "flex") {
panel.style.display = "none";
} else {
panel.style.display = "flex";
}
arrow.setAttribute("transform", "rotate(-45deg)");
});
}

Answer 1

这当前在arrow.setAttribute处引发错误，因为此时未设置arrow。并且setAttribute不是设置内联样式的合适方式。

两者都可以像这样轻松修复：

this.querySelector('.caret').style.transform = "rotate(-45deg)";

querySelector返回它找到的类的第一个元素，通过在引用按钮的this上调用它，我们可以自动将它限制在正确的范围内。然后使用适当的语法设置内联样式。

(var arrow = document.getElementsByClassName("caret")可以被完全移除，你不需要它来做任何其他事情。(

如果希望箭头在元素再次折叠时向后旋转，则不要将此行放置在末尾，而是放置在if和else块中。使用rotate(-45deg)一次，使用rotate(0)一次，将其设置回正常(或该状态所需的任何值(