JQuery выпадающего меню, вкладка доступность

Question

Fiddle здесь: http://jsfiddle.net/emJcx/1/

У меня есть выпадающее меню, которое простое шоу и скрыть при наведении курсора мыши. Я хотел бы, чтобы это выпадающее меню было доступно с помощью клавиш табуляции. С использованием этого кода:

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

Я включил выпадающий список, отображаемый в фокусе главной ссылки.

Размытие становится немного более сложным. Я пробовал:

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

Но он работает только с передними вкладками, а не с задними вкладками (сдвижными язычками).

Я также пытался что-то вроде этого:

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

Но, естественно, это не работает.

Любые мысли о том, как это может работать.

Большое спасибо.

Answer 1

Я это работает для вас: http://jsfiddle.net/emJcx/24/

Это не может быть наиболее оптимальное решение возможно, но вот что я сделал:

1. Вы были ограничив focus событие к классу триггера но у одного из ваших тегов li не было этого класса, поэтому я удалил его на данный момент. Возможно, вы захотите немного изменить это, потому что на данный момент он будет работать для каждого ли на странице.
2. Я изменил код, чтобы скрыть все дочерние элементы ul, прежде чем показывать тот, на котором вы сейчас находитесь. Таким образом, когда вы сдвигаете вкладку обратно к родительским элементам меню и удаляетесь от родителя данного подменю, он исчезает.
3. Я удалил ваше событие blur, потому что это вызвало бы проблему, когда shift-tabbing отменит последний элемент. Функциональность остается той же, потому что дополнительная спряталка действительно позаботится об этом.

Новый код просто:

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