I need to rotate the arrow 180 degrees when clicking on another area-CodePudding

I have a select menu and an arrow that rotates up 180 deg when the menu opens, I need to rotate it back when clicking on another area

HTML:

`<div>
  <select name="select" >
    <option value="A" >1</option>
    <option value="B" >2</option>
    <option value="C" >3</option>
    <option value="D" >4</option>
  </select>
  <img src="./assets/Rectangle50.png" >
</div>`

JS:

`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()`

CodePudding user response：

You can create another function to check click outside of that select menu or arrow div. Hope it maybe helpful. thanks

const onOutsideClick = event => {
 const getId = event?.target?.id == 'selectId';
 const arrowValue = document.querySelector('.rectangle')
  if (!getId) {
   arrowValue.style.transform = arrowValue.style.transform == "rotate(0deg)" ? "rotate(-180deg)" :      "rotate(0deg)"
    arrowValue.classList.add('transition_arrow')
  }
};

document.addEventListener('mousedown', onOutsideClick);