当失去焦点/模糊时隐藏DIV

Question

我有一个显示DIV的JavaScript(将其显示css属性从'none'设置为'normal'.有没有办法让它集中注意力,以便当我点击页面上的其他位置时,DIV失去焦点,它display属性设置为none(基本上隐藏它).我正在使用JavaScript和jQuery

Answer 1

对于除了selecteddiv之外的任何页面上的任何位置隐藏div

$(document).not("#selecteddiv").click(function() {
        $('#selecteddiv').hide();
    });

如果你想隐藏焦点丢失的div或动画模糊那么

$("#selecteddiv").focusout(function() {
        $('#selecteddiv').hide();
    });

用动画

$("#selecteddiv").focusout(function() {
    $('#selecteddiv').animate({
        display:"none"
    });
});

愿这对你有所帮助

Answer 2

不幸的是,如果您的网站上有iframe,然后在iframe内部点击,那么已经提供的示例无效.将事件附加到文档只会将其附加到元素所在的同一文档中.

您也可以将其附加到您正在使用的任何iframe,但如果iframe已从其他域加载内容,则大多数浏览器都不允许您这样做.

执行此操作的最佳方法是复制jQuery UI菜单栏插件中完成的操作.

基本示例HTML:

<div id="menu">Click here to show the menu
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

而jQuery需要让它工作:

var timeKeeper;

$('#menu').click(function()
{
    $('#menu ul').show();
});

$('#menu ul').click(function()
{
    clearTimeout(timeKeeper);                  
});

$('#menu').focusout(function()
{
    timeKeeper = setTimeout(function() {$('#menu ul').hide()}, 150);
});

$('#menu').attr('tabIndex', -1);
$('#menu ul').hide();

它的作用是给菜单一个标签索引,以便可以认为它具有焦点.既然你已经完成了,你可以在菜单上使用focusout事件处理程序.只要被认为失去焦点,就会触发.不幸的是,单击一些子元素将触发焦点事件(例如单击链接),因此我们需要在单击任何子元素时禁用隐藏菜单.

因为在任何子项的click事件之前调用focusout事件,实现此目的的方法是在隐藏元素之前设置一个小超时,然后单击任何子元素应清除此超时,这意味着菜单不会隐.

这是我工作的jsfiddle示例