我如何使所有的图标单独旋转，而不仅仅是一个？
我如何使所有的图标单独旋转，而不仅仅是一个？
提问于 2021-08-18 01:07:03
我有一个svg图标，点击，我希望它旋转180度。目前，只有第一个图标切换类，但我试图让所有的图标切换。
我不知道我错过了什么..。
let accordionChevron = document.querySelector('.rotate');
accordionChevron.addEventListener('click', function() {
this.classList.toggle('down');
}).rotate {
transition: all 0.2s ease-in-out;
}
.rotate.down {
transform: rotate(180deg);
}<svg class="rotate" fill="none" height="11" viewBox="0 0 16 11" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="m0 2.82837 2-2 6 6 6-6 2 2-8 8.00003z" fill="#000a70"></path>
</svg>
<hr>
<svg class="rotate" fill="none" height="11" viewBox="0 0 16 11" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="m0 2.82837 2-2 6 6 6-6 2 2-8 8.00003z" fill="#000a70"></path>
</svg>
回答 1
Stack Overflow用户
发布于 2021-08-18 01:21:05
您可以尝试以下几种方法：
let accordionChevronList = document.querySelectorAll('.rotate');
accordionChevronList.forEach(accordionChevron=>{
accordionChevron.addEventListener('click', function() {
this.classList.toggle('down');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68825482
复制相关文章
相似问题
腾讯云开发者
