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(无论是哪一个，请参阅 Lee 的 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();
  }
});