jQuery 2.1 |使用箭头键浏览列表中的非连续链接

我想在包含someli中包含的相同类链接的列表中使用箭头键导航，如下所示：

<ul>
<li class="linkTitle">LINKS BELOW</li>
<li class="linkHolder"><a class="link">LINK</a></li>
<li class="linkHolder"><a class="link">LINK</a></li>
<li class="linkTitle">LINKS BELOW</li>
<li class="linkHolder"><a class="link">LINK</a></li>
<li class="linkHolder"><a class="link">LINK</a></li>
<li class="linkHolder"><a class="link">LINK</a></li>
<li class="linkHolder"><a class="link">LINK</a></li>
</ul>

这是我用Stackoverflow调制的。上面提到的非链接li标准是通过在无序列表之间插入块元素来模拟的。菜单导航基于accesskey功能（accesskey+z）；箭头键；制表键（部分）；或者老鼠。一旦任何UL高亮显示（聚焦），左箭头键和右箭头键允许在ULs中导航，而上箭头键和下箭头键则可以在高亮显示的UL中的每个元素中导航。我添加了CSS以帮助区分哪些UL/li是重点：

CSS

body {-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}

p {margin-top:10px;margin-left:4px;}
.ulholder{width:160px;height:200px;background:#AAA}
ul {background:#AAA}
ul.focused {background:#999}
ul:hover, ul:focus, ul:active {background:#999;}

li.selected {background:darkblue}
li:hover, li:focus, li:active {background:orange;}
li:hover a, li:focus a, li:active a {color:white;}
.list{cursor:pointer;}
.link {margin-left:10px;font-weight:bold;text-decoration:none;color:darkblue}
.link:hover, .link:focus, .link:active {color:white;}
.linkfocused {color:white;}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="ulholder"><p class="label">List 1</p>
<ul accesskey="z" tabindex="0">
<li class="list"><a href="#" tabindex="-1" class="link">Item 1</a></li>
<li class="list"><a href="#" tabindex="-1" class="link">Item 2</a></li>
<li class="list"><a href="#" tabindex="-1" class="link">Item 3</a></li>
</ul>
<p class="label">List 2</p>
<ul tabindex="0">
<li class="list"><a href="#" tabindex="-1" class="link">Item 1</a></li>
<li class="list"><a href="#" tabindex="-1" class="link">Item 2</a></li>
<li class="list"><a href="#" tabindex="-1" class="link">Item 3</a></li>
</ul>
</div>

---

在没有任何代码的情况下，tabbing不会这样做吗？@j08691我在这个列表链接数组中避免使用tabIndex，因为我的UI利用了箭头键导航。左右箭头键将在链接容器标题中循环聚焦，而上下箭头键将在这些容器中的链接内容中循环聚焦。我不想在动态添加的列表/链接上维护tabIndex值。

var $liSelected;
var $ulSelected;

$(function(){

$(document).keydown(function(e) {
 // Make sure we have a ul selected

if($ulSelected) {

   if(e.which === 37) { // left arrow
   $('ul').prev().prev().addClass('focused').focus();
   }
   if(e.which === 39) { // right arrow
   $('ul').next().next().addClass('focused').focus();
   }

   if(e.which === 40) { // down arrow
   if($liSelected) {
   $liSelected.removeClass('selected');
   $liSelected.children('.link').blur();
   var $next = $liSelected.next('.list');

   if($next.length) {
   $liSelected = $next.addClass('selected');
   $next.children('.link').focus();

   } else {
   $liSelected = $ulSelected.children('li').first('.list').addClass('selected'); 
   $ulSelected.children('li').first('.list').children('.link').focus();
     }

   } else {
   $liSelected = $ulSelected.children('li').first('.list').addClass('selected');
   $ulSelected.children('li').first('.list').children('.link').focus();
     }

   } else if(e.which === 38) { // up arrow

   if($liSelected) {
   $liSelected.removeClass('selected');
   $liSelected.children('.link').blur();
   var $prev = $liSelected.prev('.list');

   if($prev.length) {
   $liSelected = $prev.addClass('selected');
   $prev.children('.link').focus();

   } else {

   $liSelected = $ulSelected.children('li').last('.list').addClass('selected');
   $ulSelected.children('li').last('.list').children('.link').focus();
     }

   } else {
   $liSelected = $ulSelected.children('li').last('.list').addClass('selected');
   $ulSelected.children('li').last('.list').children('.link').focus();
      }
   }

  }
});

$('ul .link').on('click focus', function() {
$('ul').removeClass('focused');
$('ul').find('.list').removeClass('selected');
$('ul').find('.link').removeClass('listfocused');
$(this).parent().addClass('selected');
$(this).parent().parent('ul').addClass('focused');
});

$('ul .list').on('click', function(){
$('.list').removeClass('selected');
$('.link').removeClass('linkfocused');
$(this).addClass('selected');
$(this).children('.link').focus().click().addClass('linkfocused');
});

$('ul').on('focus', function(e) {
$('ul .link').removeClass('linkfocused');
$('ul .list').removeClass('selected');
$('ul').removeClass('focused');
$ulSelected = $(this);
$(this).addClass('focused');
$liSelected = false;
});

});