jquery - jQuery，单击其他地方时隐藏下拉菜单

Question

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

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

它工作正常，但我希望当用户单击屏幕上的其他位置时菜单消失。有点像您的标准窗口下拉菜单。在我的浏览器中单击“文件”将显示下拉菜单，但单击其他​​位置（例如页面上的任何位置）将隐藏菜单。

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

Answer 1

只需使用

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

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

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

.stopPropagation()当您单击内部时，将防止事件冒泡到文档#optionsLink

Answer 2

尝试这个：

$("#optionsLink").click(function(){                   
    $("#optionsMenu").slideToggle();
  });
//new part
$(':not(#optionsLink, #optionsLink *)').click(function() {
    $("#optionsMenu").slideUp();
});

定位#optionsLink意味着您只有一个下拉菜单。如果你有更多，你应该有课，也许像.optionsLink.