JQuery popup menu, tab availability

Question

Spell here: http://jsfiddle.net/emJcx/1/

I have a drop-down menu that is a simple show and hides on hover. I would like this dropdown menu to be accessible via tabs. Using this code:

$("li.trigger a").focus(function(){ $(this).parent().find('ul').show(); }); 

I turned on the drop-down list in the focus of the main link.

Blur is getting a little more complicated. I tried this:

 $("li.trigger ul li:last-child a").blur(function(){ $(this).parent().parent().hide(); }); 

But it only works with direct tabs, not with reverse tabs (shift-tabs).

I also tried something like this:

 $('li.trigger').has('a:focus').find('ul').toggle(); 

But naturally, this does not work.

Any thoughts on how this might work.

Many thanks.

Answer 1

This works for me for you: http://jsfiddle.net/emJcx/24/

This may not be the most optimal solution, but here is what I did:

• You restricted the focus event to the trigger class, but one of the li tags did not have this class, so I removed it for now. You might want to change this a bit, because at the moment it will run for everyone on the page.
• I changed the code to hide all ul child tags until the one you are currently on is displayed. Thus, when you transfer the tab back to the parent menu items and move away from the parent of this submenu, it disappears.
• I deleted your blur event because it would cause a problem when shift-tabbing undo the last element. The functionality remains the same, because the extra hider really cares about it.

The new code is simple:

 $("li a").focus(function(){ $(this).parent().parent().find('ul').hide(); $(this).parent().find('ul').show(); });