18

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

我希望当用户单击其他任何地方时隐藏下拉菜单。

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

不管用。

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

4

6 回答 6

22

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

查看这篇文章以获取更多信息和演示。

于 2011-07-28T13:40:39.203 回答
16

我认为问题在于 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>
于 2009-08-11T11:24:57.957 回答
5 
$("body").click(function (evt) {
     var target = evt.target;
     if(target.id !== 'menuContainer'){
            $(".menu").hide();
    }                
});

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

于 2009-08-20T13:32:46.390 回答
1

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

因此，您的标记将更改为：

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

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

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

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

$('div > #focus_proxy').focus()
于 2012-05-17T10:39:59.253 回答
-1

我刚遇到这个问题。我想以上都不能正确解决问题，所以我在这里发布我的答案。它是上述一些答案的组合：至少它解决了两个问题，只需检查点击的点是否相同“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();
    }
});
于 2012-05-31T12:19:26.390 回答
-3

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

$('div').click(function(e) {
    var $target = $(e.target);
    if (!$target.is("select")) { $(this).hide() };
});
于 2009-08-11T11:24:04.133 回答