Question

我正在尝试通过键盘访问下拉菜单（仅使用Tab，无访问键）。我无法弄清楚如何使子项目可访问。

所需的行为如下：单击“项目”或具有焦点时，显示列表;当“item”失去焦点（模糊）时，如果没有“子项目”具有焦点（这意味着它已通过键盘访问），则隐藏列表。

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的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 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。

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

3 个答案: