Question

I’m using the following for a dropdown:

/* 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();
        }
    }
});

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

Answer 1

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