1

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" 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>`

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()`
dancer98
  • 35
  • 5
  • document.querySelector('.spb') where you define – Nisha Jan 25 '23 at 17:55
  • Does this answer your question? There's a non jQuery example in the top answer to show you how you detect clicks outside the required element. [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) – Adam Jan 25 '23 at 17:57

1 Answers1

0

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);
Ahmad Arif
  • 101
  • 1
  • 5