How to bind an event to Tabbing Off an element?

I'm using the following for a dropdown:

/* recurse through dropdown menus */
$('.dropdown').each(function() {
    /开发者_C百科* 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();
        }
    }
});

Notice:

$(document.body).bind('click',function(e) {

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.

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

Thanks

You could trigger a click outside when you press the tab key. Like this:

$('#your_dropdown').bind('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 9) {  //If it's the tab key
    $("body").click(); //Force a click outside the dropdown, so it forces a close
  } 
});

Hope this helps. Cheers

Try the blur event, which will be triggered when the control loses focus (i.e., when the user clicks outside the control or uses the keyboard to tab to the next control).

Put something like this just after your existing focus binding:

dropdown.bind('blur',function() {
  // whatever tests you want
  hideMenu();
});

(You shouldn't then need the separate click binding that you're currently using to hide the menu.)

P.S. You might also consider focusout, which is similar to blur except that it bubbles.

Seems like you're looking for the onblur event?