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意味着您只需要一个下拉列表。如果你有更多你应该hava课程，可能像.optionsLink。

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

2 个答案: