jQuery menú desplegable, pestaña accesibilidad

Question

violín aquí: http://jsfiddle.net/emJcx/1/

que tiene un menú desplegable que es un espectáculo sencillo y ocultar en vuelo estacionario. Me gustaría que este menú desplegable sea accesible usando las teclas de tabulación también. Utilizando este código:

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

He habilitado el menú desplegable para mostrar en el foco de enlace cabeza.

El desenfoque se vuelve un poco más complejo. He intentado esto:

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

pero sólo funciona con las lengüetas hacia adelante, no hacia atrás pestañas (tabs-turno).

también he intentado algo como esto:

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

Pero, naturalmente, esto no funciona.

Cualquier idea sobre cómo esto podría funcionar.

Muchas gracias.

Answer 1

He esta trabajando para usted: http://jsfiddle.net/emJcx/24/

puede no ser la solución más óptima posible, pero aquí es lo que hice:

1. Usted estaba limitando su caso focus a la clase de gatillo pero una de tus etiquetas li no tenía esa clase, así que la eliminé por el momento. Es posible que desee abrochar esto un poco porque en este momento se ejecutará por cada li en la página.
2. Cambié el código para ocultar todas las etiquetas ul hijo antes de mostrar el que está actualmente. De esta forma, cuando mueva la pestaña hacia atrás a los elementos del menú principal y se aleje del elemento primario de un submenú dado, desaparecerá.
3. Eliminé su evento blur porque habría causado un problema cuando shift-tabbing retrocediera del último elemento. La funcionalidad sigue siendo la misma porque el hide adicional realmente se ocupa de esto.

El nuevo código es simplemente:

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