小编典典

如何模糊div元素?

javascript

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

我希望用户单击其他任何位置时下拉菜单都隐藏。

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

不管用。

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


阅读 764

收藏
2020-05-01

共1个答案

小编典典

我认为问题在于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>
2020-05-01