Как убрать выпадающее меню при клике в любую область кроме самой кнопки?

Question

Меню убирается только при клике на саму же кнопку. Как сделать, чтобы оно пропадало ещё и при клике на пустую область в окне браузера? И как сделать его плавно выходящим и уходящим?

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

<div class="dropdown buttons_headdiv">
  <a onclick="myFunction()" class="dropbtn">Профиль</a>

  <div id="myDropdown" class="dropdown-content">
    <a href="{{ url_for('personal') }}">Профиль</a>
    <a href="{{ url_for('order') }}">Корзина</a>
    <a href="{{ url_for('trades') }}">Заказы</a>
  </div>
</div>

Answer 1

Как убрать выпадающее меню при клике в любую область кроме самой кнопки?

Например вот таким образом это можно сделать...

const ob = document.querySelector('body')
const oa = document.querySelector('.dropbtn')
const od = document.getElementById("myDropdown")
const act = {
  ok: false,
  fn(e) {
    if (e.target.closest('.dropbtn') === oa) return
    od.classList.remove('show')
    act.del()
  },
  del() {
    ob.removeEventListener('click', act.fn)
    act.ok = false
  }
}
oa.addEventListener('click', _ => {
  od.classList.toggle("show")
  if (act.ok) return act.del()
  ob.addEventListener('click', act.fn)
  act.ok = true
})

html,
body {
  height: 100vh;
}
#myDropdown {
  display: none;
}
#myDropdown.show {
  display: block;
}

<div class="dropdown buttons_headdiv">
  <a class="dropbtn">Профиль</a>

  <div id="myDropdown" class="dropdown-content">
    <a href="{{ url_for('personal') }}">Профиль</a>
    <a href="{{ url_for('order') }}">Корзина</a>
    <a href="{{ url_for('trades') }}">Заказы</a>
  </div>
</div>

БЛОГ НА HUSL

Как убрать выпадающее меню при клике в любую область кроме самой кнопки?

Ответы (1 шт):