如何实现点击手风琴（Accordion）组件时箭头旋转180度？

你只需要两步就能实现箭头随手风琴展开/收起同步旋转的效果，逻辑简单直接：

1. 添加箭头旋转的CSS样式 #

先给箭头元素加上过渡动画，再定义一个控制旋转状态的类，让旋转过程更平滑：

/* 给箭头添加过渡动画，确保旋转过程流畅 */
.faqs-question i {
    font-size: 48px;
    transition: transform 0.6s ease; /* 新增过渡属性 */
}

/* 定义箭头旋转180度的类 */
.faqs-question i.rotate {
    transform: rotate(180deg);
}

2. 修改JavaScript同步切换箭头状态 #

在你已有的点击事件逻辑里，新增一行代码找到按钮内的箭头元素，用classList.toggle()同步切换旋转类：

const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
    button.addEventListener('click', () => {
        const faq = button.nextElementSibling;
        faq.classList.toggle('show');
        
        // 新增：找到按钮内的箭头，切换旋转类
        const arrow = button.querySelector('i');
        arrow.classList.toggle('rotate');
    })
})

这样每次点击按钮时，箭头会和答案的展开/收起状态同步切换旋转方向——展开时箭头向上转180度，收起时自动恢复向下状态。

内容的提问来源于stack exchange，提问作者TheNickster