Question

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

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">ddm</button>
<div id="myDropdown" class="dropdown-content">
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
</div>
</div>

<script type="text/javascript">
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');
   }
  }
 }
}
</script>

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();
}

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

3 个答案: