我在 DIV 中有一个下拉菜单。
我希望当用户点击其他任何地方时隐藏下拉菜单。
$('div').blur(function() { $(this).hide(); }
不工作。
我知道 .blur 仅适用于 <a>，但在这种情况下，最简单的解决方案是什么？
【问题讨论】：
标签： javascript jquery html onblur
尝试在您的 div 上使用 tabindex 属性，请参阅：
查看this 帖子了解更多信息和演示。
【讨论】：
我认为问题在于 div 不会触发 onfocusout 事件。您需要捕获主体上的单击事件，然后确定目标是否是菜单 div。如果不是，那么用户点击了其他地方并且需要隐藏 div。
<head>
<script>
$(document).ready(function(){
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
});
</script>
<style>#menu { display: none; }</style>
</head>
<body>
<div id="menu_button" onclick="$('#menu').show();">Menu....</div>
<div id="menu"> <!-- Menu options here --> </div>
<p>Other stuff</p>
</body>
【讨论】：
<div tabindex="100" onfocus="alert('!')"> Blah </div>
$("body").click(function (evt) {
var target = evt.target;
if(target.id !== 'menuContainer'){
$(".menu").hide();
}
});
给 div 一个 id，例如“menuContainer”。然后您可以通过 target.id 而不是 target.tagName 检查以确保它是特定的 div。
【讨论】：
不是最干净的方式，但您可以向 div 添加一个空链接并将其用作 div 的“焦点代理”，而不是捕获页面上的每个点击事件。
所以你的标记会变成：
<div><a id="focus_proxy" href="#"></a></div>
并且您的 Javascript 代码应该与链接上的 blur 事件挂钩：
$('div > #focus_proxy').blur(function() { $('div').hide() })
显示 div 时不要忘记将焦点设置在链接上：
$('div > #focus_proxy').focus()
【讨论】：
我刚遇到这个问题。 我想以上都不能正确解决问题，所以我在这里发布我的答案。这是上述一些答案的组合： 至少它解决了两个问题，只需检查点击点是否相同“id”
$("body").click(function(e) {
var x = e.target;
//check if the clicked point is the trigger
if($(x).attr("class") == "floatLink"){
$(".menu").show();
}
//check if the clicked point is the children of the div you want to show
else if($(x).closest(".menu").length <= 0){
$(".menu").hide();
}
});
【讨论】：
.click 在 div 标签内可以正常工作。只要确保您没有超出选择元素的顶部即可。
$('div').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});
【讨论】：