我想更改图标，即根据下拉菜单是否关闭来更改箭头.当下拉菜单关闭时，我希望箭头向下，当它打开时，我希望箭头向上.因为我有多个下拉菜单，我该如何解决这个问题？
我希望该操作是用JavaScript编写的.
const dropdownBtn = document.querySelectorAll('.b-footerMobile__item');
const dropdown = document.querySelectorAll('.b-footerMobile__dropdown');
const up = document.querySelectorAll('.b-footerMobile__up');
const down = document.querySelectorAll('.b-footerMobile__down');
dropdownBtn.forEach((btn)=>{
btn.addEventListener('click',(e) =>{
const target = e.currentTarget.dataset.dropdown;
const current = document.getElementById(target);
current.classList.toggle('active');
dropdown.forEach((drop) =>{
if(drop.id !== target){
drop.classList.remove('active');
}
});
})
}).b-footerMobile__dropdown {
display: none;
}
.b-footerMobile__dropdown.active {
display: flex;
flex-direction: column;
align-items: center;
background-color: #414141;
width: 100%;
padding: 1px 0;
height: 90%;
}
.b-footerMobile__up {
display: none;
}
.b-footerMobile__up.active {
display: block;
}
.b-footerMobile__down {
display: block;
}
.b-footerMobile__down.active {
display: none;
}<div class="b-footerMobile__menu">
<div class="b-footerMobile__item" data-dropdown="dropdown1">
<h2 class="b-footerMobile__title">Drop1</h2>
<div class="bla">
<img src="./images/arrow-down-mobile.svg" alt="arrow-down"
class="b-footerMobile__arrow b-footerMobile__down">
<img src="./images/arrow-up-mobile.svg" alt="arrow-down"
class="b-footerMobile__arrow b-footerMobile__up">
</div>
</div>
<div class="b-footerMobile__dropdown" id="dropdown1">
<div class="b-footerMobile__li">
<p class="b-footer__p">1</p>
</div>
<div class="b-footerMobile__li">
<p class="b-footer__p">2</p>
</div>
<div class="b-footerMobile__li">
<p class="b-footer__p">3</p>
</div>
</div>
</div>
<div class="b-footerMobile__item" data-dropdown="dropdown2">
<h2 class="b-footerMobile__title">Drop2</h2>
<div class="bla">
<img src="./images/arrow-down-mobile.svg" alt="arrow-down"
class="b-footerMobile__arrow b-footerMobile__down">
<img src="./images/arrow-up-mobile.svg" alt="arrow-down"
class="b-footerMobile__arrow b-footerMobile__up">
</div>
</div>
<div class="b-footerMobile__dropdown" id="dropdown2">
<div class="b-footerMobile__li">
<p class="b-footer__p">1</p>
</div>
<div class="b-footerMobile__li">
<p class="b-footer__p">2</p>
</div>
<div class="b-footerMobile__li">
<p class="b-footer__p">3</p>
</div>
</div>
</div>