如何模糊div元素? [英] How to blur the div element?

查看:92
本文介绍了如何模糊div元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



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

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

不起作用。



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

解决方案

我认为问题在于divs不会触发 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_buttononclick =$('#menu')。show();>菜单....< / div>
< div id =menu> <! - 此处的菜单选项 - > < / DIV>

< p>其他资料< / p>
< / body>


I have a dropdown menu inside a DIV.

I want the dropdown to be hide when user click anywhere else.

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

is not working.

I know .blur works only with <a> but in this case what is the simplest solution?

解决方案

I think the issue is that divs don't fire the onfocusout event. You'll need to capture click events on the body and then work out if the target was then menu div. If it wasn't, then the user has clicked elsewhere and the div needs to be hidden.

<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元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆