如何通过点击任何地方关闭JavaScript下拉菜单？

这是一个javascript下拉菜单。 我从一些网站得到它它工作正常但问题是下拉菜单仅在单击菜单按钮时关闭。 即使我点击页面上的任何其他位置，如何关闭下拉菜单。

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

Answer 1

尝试下面的代码，它应该工作

 $(document).click(function(event) { if(!$(event.target).closest('#myDropdown').length) { if($('#myDropdown').is(":visible")) { $('#myDropdown').hide() } } }) 

Answer 2

你可以使用这段代码： –

 var dropdown = $('dropdown_selector'); $(document).click(function(e){ if(e.target === dropdown.get(0)) { // hide dropdawn code here } }); 

Answer 3

当元素失去焦点时触发onBlur事件。

 document.getElementById("myDropdown").onblur = function() { myFunction(); }