How to bind an event to Tabbing Off an element?
<p>I'm using the following for a dropdown:</p>

<pre><code>/* recurse through dropdown menus */
$('.dropdown').each(function() {
    /* track elements: menu, parent */
    var dropdown = $(this);
    var menu = dropdown.next('div.dropdown-menu'), parent = dropdown.parent();
    /* function that shows THIS menu */
    var showMenu = function() {
        hideMenu();
        showingDropdown = dropdown.addClass('dropdown-active');
        showingMenu = menu.show();
        showingParent = parent;
    };
    /* function to show menu when clicked */
    dropdown.bind('click',function(e) {
        if(e) e.stopPropagation();
        if(e) e.preventDefault();
        showMenu();
    });
    /* function to show menu when someone tabs to the box */
    dropdown.bind('focus',function() {
        showMenu();
    });
});

/* hide when clicked outside */
$(document.body).bind('click',function(e) {
    if(showingParent) {
        var parentElement = showingParent[0];
        if(!$.contains(parentElement,e.target) || !parentElement == e.target) {
            hideMenu();
        }
    }
});
</code></pre>

<p>Notice:</p>

<p>$(document.body).bind('click',function(e) {</p>

<p>The problem is that the dropdown opens on click or when you tab to it. But it only closes on click, not when you tab out.</p>

<p>How can I bind an event to mean "tabbing out" ,losing focus, so the dropdown closes?</p>

<p>Thanks</p>
