Hide a DIV when it loses focus/blur

Question

I have a JavaScript that displays a DIV (sets its display css property from \'none\' to \'normal\'. Is there a way to give it focus as well so that when I click somewhere else o

Answer 1

The examples already given unfortunately do not work if you have an iframe on your site and then click inside the iframe. Attaching the event to the document will only attach it to same document that your element is in.

You could also attach it to any iframes you're using, but most browsers won't let you do this if the iframe has loaded content from another domain.

The best way to do this is to copy what's done in the jQuery UI menubar plugin.

Basic example HTML:

Click here to show the menu
    

        
Item 1
        
Item 2
        
Item 3
    

And the jQuery needed to make it work:

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();

What it does is give the menu a tab index, so that it can be considered to have focus. Now that you've done that you can use the focusout event handler on the menu. This will fire whenever it has been considered to lose focus. Unfortunately, clicking some child elements will trigger the focusout event (example clicking links) so we need to disable hiding the menu if any child elements have been clicked.

Because the focusout event gets called before the click event of any children, the way to achieve this is by setting a small timeout before hiding the element, and then a click on any child elements should clear this timeout, meaning the menu doesn't get hidden.

Here is my working jsfiddle example