I am working on a project where I have implemented a select menu with an arrow that rotates 180 degrees when the menu opens. However, I need to rotate it back when clicking on another area.
Below is the HTML code:
`<div>
<select name="select" class="s">
<option value="A" class="option">1</option>
<option value="B" class="option">2</option>
<option value="C" class="option">3</option>
<option value="D" class="option">4</option>
</select>
<img src="./assets/Rectangle50.png" class="rectangle">
</div>`
And here is the JavaScript code:
`function arrowMenu() {
const select = document.querySelector('.spb')
const arrowValue = document.querySelector('.rectangle')
select.addEventListener('click', arrow)
function arrow() {
arrowValue.style.transform = arrowValue.style.transform == "rotate(0deg)" ? "rotate(-180deg)" : "rotate(0deg)"
arrowValue.classList.add('transition_arrow')
}
arrow()
}
arrowMenu()`