jquery - jQuery：通过 Tab 访问下拉菜单项

Question

我正在尝试通过键盘访问下拉菜单（仅使用 Tab，没有访问键）。我不知道如何使子项可访问。

期望的行为如下：当“item”被点击或获得焦点时，显示列表；当“项目”失去焦点（模糊）时，如果没有“子项目”有焦点（这意味着它已通过键盘访问），隐藏列表。

小提琴：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/4/

此代码遵循您的代码以使标签工作：

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

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

Answer 2

这个怎么样：http: //jsfiddle.net/DBdbz/6/？

要使焦点/模糊在每个浏览器上都起作用，唯一需要的是给定元素上的 tabindex（无论是哪一个，请参见 Lee 的链接）：

<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 3

您可以尝试以下方法：

$('ul').hide();

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

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

如果 ul 的 li 都没有聚焦，它只会隐藏 ul。