如何模糊div元素？
我有一个DIV内的下拉菜单。
当用户点击其他任何地方时，我想要隐藏下拉菜单。
$('div').blur(function() { $(this).hide(); } 不pipe用。
我知道.blur只适用于<a>但在这种情况下，最简单的解决scheme是什么？
我认为问题在于divs不会解决这个问题。 你需要捕获正文上的点击事件，然后解决目标是否是菜单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属性，请参阅：
检查这个职位的更多信息和演示。
$("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()
我刚刚遇到这个问题。 我想以上都不能正确解决问题，所以我张贴我的答案在这里。 这是上述一些答案的组合：至less它解决了可能遇到的两个问题，只要检查点击的点是否是相同的“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标签内正常工作。 只要确保你没有超过select元素的顶部。
$('div').click(function(e) { var $target = $(e.target); if (!$target.is("select")) { $(this).hide() }; });
