jQuery：通過Tab訪問下拉菜單項

Question

我試圖通過鍵盤（僅使用Tab鍵，不使用訪問鍵）訪問下拉菜單。 我不知道如何使子項目可訪問。

所需的行為如下：單擊“項目”或獲得焦點時，顯示列表。 當“項目”失去焦點（模糊）時，如果沒有“子項目”具有焦點（這意味着已通過鍵盤對其進行了訪問），則隱藏列表。

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