Question

var item = $('li > a', $(MENU_ELEMENT));
    item.focus(function(event){
        $(this).siblings('ul').css('display', 'block');
        $(this).parents('ul > li > ul').css('display', 'block');
    });
    item.blur(function(event){ 
        $(this).siblings('ul').css('display', 'none');
        $(this).parents('ul > li > ul').css('display', 'none');
    });

Essentially, MENU_ELEMENT would be a ul > li style dropdown menu with the following hierarchy:
<ul><li><a>Menu Item</a><ul><li><a>Sub Item 1</a></li>...</ul></li>....</ul>

Everything’s pretty standard really. The idea is to make the menu accessible with the tab key. Works in Chrome perfectly: when a child element receives focus, it makes sure that the parents as well as any submenus display. When the child loses focus, everything goes away.

In FF, it behaves like it would if you just added a :focus selector to your CSS stylesheet – the top menu items work great, but as soon as you go into a menu, they collapse.

In IE it’s even weirder – you tab into a menu, then when you tab again, you’re reset to the previous position.

This isn’t really a jQuery issue, I’m sure – just the way the different browsers implement focus, blur and tab keys. What’s the solution?

Edit I should point out that if you remove the entire blur handler, all three browsers behave exactly the same way (the menus all pull down and you can tab through them, but they just don’t collapse after you tab out of them.)

Answer 1

The issue has more to do with how the browsers cache the current activeElement and handle the tabindex, and WHEN each browser processes the onblur/onfocus between Tab presses. When you use display:none to hide elements, FF and IE remove the tabindex from the list of tabs altogether, whereas Chrome does not appear to. In FF and IE, once an item loses focus, and the jQuery above hides that item, the tabindex is screwed up and the activeElement goes back to being the BODY. Using negative margins instead of display:none avoids the issue