jQuery，使下拉菜单在单击其他地方时隐藏

Question

我正在使用 jQuery 制作一个简单的下拉菜单:

<script>                    
  $("#optionsLink").click(function(){                   
    $("#optionsMenu").slideToggle();
  });
</script>

它工作正常，但我希望当用户单击屏幕上的其他位置时菜单消失。有点像标准的 Windows 下拉菜单。在浏览器中单击"file"将显示下拉菜单，但单击其他​​位置(例如页面上的任何位置)将隐藏菜单。

我将如何实现这样的事情？

Answer 1

直接使用

$("#optionsLink").click(function(e){
  $("#optionsMenu").slideToggle();
  e.stopPropagation(); 
});

$(document).click(function(){                   
  $("#optionsMenu").slideUp();
});

“slideToggle”会在您每次单击任意位置时切换菜单，但我认为这不是您想要的

当您在 #optionsLink 内部单击时，

.stopPropagation() 将阻止事件冒泡到文档中