Question

我在DIV中有一个下拉菜单。

我希望当用户点击其他地方时隐藏下拉列表。

$('div').blur(function() { $(this).hide(); }

无效。

我知道.blur只适用于<a>，但在这种情况下，最简单的解决方案是什么？

Answer 1

尝试在div上使用tabindex属性，请参阅：

查看this帖子了解更多信息和演示。

Answer 2

我认为问题是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>

Answer 3

$("body").click(function (evt) {
     var target = evt.target;
     if(target.id !== 'menuContainer'){
            $(".menu").hide();
    }                
});

给div一个id，例如“menuContainer”。然后你可以通过target.id而不是target.tagName进行检查，以确保它的特定div。

Answer 4

不是最干净的方式，但不是捕获页面上的每个点击事件，而是可以为div添加一个空链接，并将其用作div的“焦点代理”。

所以你的标记将改为：

<div><a id="focus_proxy" href="#"></a></div>

并且您的Javascript代码应该挂钩链接上的blur事件：

$('div > #focus_proxy').blur(function() { $('div').hide() })

当您显示div时，不要忘记将焦点设置在链接上：

$('div > #focus_proxy').focus()

Answer 5

我刚遇到这个问题。我猜以上都不能正确解决问题，所以我在这里发布我的答案。这是以上一些答案的组合：至少它修复了一个可能遇到的问题，只需检查点击的点是否是相同的“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();
    }
});

Answer 6

.click可以在div标签内正常工作。只要确保你没有超过select元素。

$('div').click(function(e) {
    var $target = $(e.target);
    if (!$target.is("select")) { $(this).hide() };
});

如何模糊div元素？

6 个答案: