如何模糊div元素？

我有一个DIV内的下拉菜单。如何模糊div元素？

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

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

不起作用。

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

来源

2009-08-11 Aamir Afridi

看来你需要在身体处理onclick事件和检查它是否在div上单击。如果没有 - 隐藏这个div。 – 2009-08-11 11:50:27

我认为问题是，divs不会触发onfocusout事件。您需要捕获正文上的点击事件，然后确定目标是否为菜单格。如果不是，那么用户点击其他地方，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-11 11:24:57

我不认为这回答了这个问题。我的理解是，除非您单击select元素，否则当您单击内部时，aamir会隐藏div。 – ScottE 2009-08-11 11:36:57

这是错误的。当用户点击不属于菜单的另一个div时会发生什么？ – rahul 2009-08-11 11:40:53

+17

如果您为其指定tabindex，则div可以接受焦点并发布onfocus和onblur。试试这个： '

Blah

' – vit 2009-08-11 11:53:32

-3

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

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

来源

2009-08-11 11:24:04 ScottE

div如何成为精选？ – redsquare 2009-08-11 11:26:41

是的，应该测试过，需要看目标... – ScottE 2009-08-11 11:33:13

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

给DIV一个ID，比如 “MenuContainer中”。那么你可以通过target.id而不是target.tagName来检查它的特定div。

来源

2009-08-20 13:32:46 PulledBull

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

检查this后获取更多信息和演示。

来源

2011-07-28 13:40:39 comenk

这似乎不适用于iOS Safari。 – Rell 2014-09-27 17:21:45

为此工作div需要首先集中注意力，因此在点击之前确保它集中注意力外部div看到的影响 – Bren 2014-11-25 12:55:39

OMG ... GENIUS !!非常感谢...在这里我试图找到一种方法来使自定义事件处理程序... :) – carinlynchin 2016-04-18 17:48:56

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

所以您的标记将改为：

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

和JavaScript代码应该勾模糊事件链接：

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

不要忘记将焦点设置链接当你显示的div：

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

来源

2012-05-17 10:39:59 guyk

我刚刚遇到这个问题。我想以上都不能正确解决问题，所以我在这里发布我的答案。这是一些上述答案的组合：至少它修复了一个可能被碰到2个问题只是检查，如果点击的点是一样的“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-31 12:19:26 user1345344

如何模糊div元素？

回答

相关问题