主页 / 问题 / 1597286
Accepted
weldoy
Asked:2024-10-20 20:33:37 +0000 UTC2024-10-20 20:33:37 +0000 UTC

单击按钮本身以外的任何区域时如何删除下拉菜单？

  • 772

仅当您单击按钮本身时才会删除菜单。当我单击浏览器窗口中的空白区域时，如何使其消失？又如何让它顺利来去呢？

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>

javascript

1 个回答

  1. Best Answer

    单击按钮本身以外的任何区域时如何删除下拉菜单？

    例如，您可以这样做......

    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>

    • 2

相关问题