jQuery: доступ к меню выпадающего меню через Tab

Question

Я пытаюсь сделать выпадающее меню доступным с клавиатуры (используя только Tab, без ключей доступа). Я не могу понять, как сделать доступными подтышки.

Желаемое поведение: когда «элемент» щелкнут или имеет фокус, отобразите список; когда «item» теряет фокус (при размытии), если «подпункт» не имеет фокуса (что означало бы, что к нему было обращено через клавиатуру), скройте список.

Fiddle: http://jsfiddle.net/DBdbz/

HTML

<p id="ui"><a href="#">Item</a></p> 
<ul> 
    <li><a href="#">Sub item 1</a></li> 
    <li><a href="#">Sub item 1</a></li> 
    <li><a href="#">Sub item 1</a></li> 
</ul> 

JS

$('ul').hide(); 

$('#ui a').on('focus', function() { 
    $('ul').show(); 
}); 

$('#ui a').on('blur', function() { 
    $('ul').hide(); 
}); 

Спасибо за вашу помощь.

Answer 1

Что об этом: http://jsfiddle.net/DBdbz/6/?

Чтобы получить фокус/размытия для работы в любом браузере, единственное, что требуется, это TabIndex на данный элемент (независимо от того, какой из них, увидеть Ли link):

<p id="ui"><a href="#" tabindex="1">Item</a></p> 
<ul> 
    <li><a href="#">Sub item 1</a></li> 
    <li><a href="#">Sub item 1</a></li> 
    <li><a href="#">Sub item 1</a></li> 
</ul> 

И здесь приходит JS:

$('ul').hide(); 

$('#ui a').on('focus', function() { 
    $('ul').show(); 
}); 

$('#ui a').on('keydown', function(e) { 
    if (e.keyCode == 9) { 
    $('ul').addClass('tab'); 
    } 
}); 

$('ul').on('mouseover', function() { 
    $('ul').addClass('mouse'); 
}); 

$('ul').on('mouseout', function() { 
    $('ul').removeClass('mouse').removeClass('tab'); 
}); 

$('ul li:last-child a').on('blur', function() { 
    if ($('ul').hasClass('tab')) { 
    $('ul').hide().removeClass('tab'); 
    } 
}); 

$('#ui a').on('blur', function() { 
    if (!$('ul').is('.tab, .mouse')) { 
    $('ul').hide(); 
    } 
}); 

Answer 2

Вы можете попробовать следующее:

$('ul').hide(); 

$('#ui a').on('focus', function() { 
    $('ul').show(); 
}); 

$('#ui a').on('blur', function() { 
    if ($('ul li').is(':focus').length < 1) $('ul').hide(); 
}); 

Это только скрывает ул, если ни один из литий ЛУ никогда сфокусирован.

Answer 3

Вот еще одна скрипка, которая правильно выполняет табуляцию. Ваша оригинальная скрипка не открывала меню, когда я нажимаю «Item», поэтому я не уверен, что это значит.

http://jsfiddle.net/DBdbz/4/

Этот код идет после того, как ваша, чтобы сделать работу: табуляции

$("ul a").on('focus', function() { 
    $('ul').show(); 
}); 

$("ul a").on('blur', function() { 
    $('ul').hide(); 
});