如何在点击时将手风琴箭头旋转180度

Question

我希望能够点击手风琴式问题，如果我再次点击该问题，则箭头向上旋转180度，然后向下旋转。

我已经想好了如何使用javascript在点击时扩展手风琴式答案，所以我只剩下箭头了。

有人能帮忙吗？

这是html、css和js代码。

`

<div class="faqs-container">


<div class="faqs-question">

<button>
<h3>Which services do you provide?</h3>
<i class="fa fa-angle-down"></i> 
</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. </p>


</div>
</div>

`

`

.faqs-container {
max-width: 60%;
margin: 0 auto;
}

.faqs-question {
width: 100%;
border-bottom: 3px solid #999;
margin-bottom: 30px;
}

.faqs-question button{
width: 100%;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 15px;
border: none;
outline: none;
font-size: 24px;
font-family: 'interstate', sans-serif;
font-weight: 500;
color: #300600;
cursor: pointer;
transition: 0.6s ease-in-out;
}
.faqs-question button h3{
font-size: 24px;
font-family: 'interstate', sans-serif;
font-weight: 500;
}

.faqs-question i{
font-size: 48px;
}

.faqs-question p {
margin-top: 10px;
font-size: 24px;
font-family: 'Merriweather-Sans', sans-serif;
font-weight: 300;
line-height: 55px;
color: #444;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: 0.6s ease;
}

.faqs-question p.show{
max-height: 30vh;
opacity: 1;
padding: 10px 0px 40px 15px;
margin-bottom: 35px;
}

`

`

<script>

const buttons = document.querySelectorAll('button');
buttons.forEach( button =>{
button.addEventListener('click',()=>{
const faq = button.nextElementSibling;
faq.classList.toggle('show');

})
} )

</script>

`

我不知道从哪里开始使用javascript。我对还是个新手

Answer 1

您还必须在图标上切换一个类：

const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', () => {
const faq = button.nextElementSibling;
faq.classList.toggle('show');
button.querySelector('i').classList.toggle('rotate')
})
})

.faqs-container {
max-width: 60%;
margin: 0 auto;
}
.faqs-question {
width: 100%;
border-bottom: 3px solid #999;
margin-bottom: 30px;
}
.faqs-question button {
width: 100%;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 15px;
border: none;
outline: none;
font-size: 24px;
font-family: 'interstate', sans-serif;
font-weight: 500;
color: #300600;
cursor: pointer;
transition: 0.6s ease-in-out;
}
.faqs-question button h3 {
font-size: 24px;
font-family: 'interstate', sans-serif;
font-weight: 500;
}
.faqs-question i {
transition: 0.2s;
font-size: 48px;
}
.faqs-question p {
margin-top: 10px;
font-size: 24px;
font-family: 'Merriweather-Sans', sans-serif;
font-weight: 300;
line-height: 55px;
color: #444;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: 0.6s ease;
}
.faqs-question p.show {
max-height: 30vh;
opacity: 1;
padding: 10px 0px 40px 15px;
margin-bottom: 35px;
}
.rotate {
transform: rotate(90deg);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="faqs-container">
<div class="faqs-question">
<button>
<h3>Which services do you provide?</h3>
<i class="fa fa-angle-down"></i> 
</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
</div>