我在 DIV 中有一个下拉菜单。
我希望当用户单击其他任何地方时隐藏下拉列表。
$('div').blur(function() { $(this).hide(); }
不管用。
我知道 .blur 仅适用于<a>但在这种情况下最简单的解决方案是什么？
如何模糊div元素？
IT技术
javascript
jquery
html
onblur
2021-02-04 02:55:52
6个回答
尝试在您的 div 上使用 tabindex 属性，请参阅：
查看此帖子以获取更多信息和演示。
我认为问题是 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>
$("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 代码应该挂钩到链接上的模糊事件：
$('div > #focus_proxy').blur(function() { $('div').hide() })
显示 div 时不要忘记将焦点设置在链接上：
$('div > #focus_proxy').focus()
我刚遇到这个问题。我想以上都不能正确解决问题，所以我在这里发布我的答案。它是上述一些答案的组合：至少它解决了 2 个可能会遇到的问题，只需检查单击的点是否是相同的“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();
}
});