如何模糊div元素?

Aam*_*idi 18 html javascript jquery onblur

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

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

$('div').blur(function() { $(this).hide(); }
Run Code Online (Sandbox Code Playgroud)

不管用.

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

小智 21

尝试在div上使用tabindex属性,请参阅:

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


Dav*_*son 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>
Run Code Online (Sandbox Code Playgroud)

  • 如果为其指定tabindex,div可以接受焦点并发出onfocus和onblur.试试这个:`<div tabindex ="100"onfocus ="alert('!')"> Blah </ div>` (18认同)

Pul*_*ull 5

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

给div一个id,例如"menuContainer".然后你可以通过target.id而不是target.tagName来检查以确保它的特定div.