jQuery 2.1 |通過列表中不連續的鏈接與箭頭鍵導航

Question

我想包含封閉同一類鏈路內一些李名單內的箭頭鍵來瀏覽，類似如下：

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

的下面的代碼適用於列表中上下連續的鏈接和循環，但是，在遇到不包含鏈接的li時，它會中斷。

$(function() { 
 

 
    var $li = $('li'), 
 
     
 
    $move = $(".move").click(function() { 
 
     this.focus(); 
 
    }); 
 
    
 
    $(document).keydown(function(e) { 
 
     if (e.keyCode == 40 || e.keyCode == 38) { 
 
      var inc = e.keyCode == 40 ? 1 : -1, 
 
       move = $move.filter(":focus").parent('li').index() + inc; 
 
      $li.eq(move % $li.length).find('.move').focus(); 
 
     } 
 
    }); 
 
    
 
    $move.filter(':first').focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
     <a href="#" class='move'>Link</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class='move'>Link</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class='move'>Link</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class='move'>Link</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class='move'>Link</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class='move'>Link</a> 
 
    </li> 
 
    
 
</ul>

我試過，但似乎無法使其與非連續環節的工作。一個解決方案，您只能在同類鏈接中導航（和循環），無論鏈接li的數量和位置在列表中將使我的一天！

UPDATE

這裏有一個DEMO我正在哪種作品，向上箭頭鍵按預期工作，但停在列表頂部集中一次。向下箭頭鍵將焦點跳到列表的底部。通過鏈接循環也不起作用。在這個示例中，nextAll（）和prevAll（）似乎在遇到沒有鏈接的情況下執行這個技巧。

Answer 1

這裏是一個SOLUTION我從Stackoverflow編制based on this answer。上面提到的非鏈接li標準是用在無序列表之間插入的塊元素來模擬的。菜單導航基於accesskey功能（accesskey + z）;方向鍵; Tab鍵（部分）;或鼠標。一旦任何UL被突出顯示（聚焦），左右箭頭鍵允許通過UL導航，而上下箭頭鍵導航突出顯示的UL內的每個元素。我加了CSS，以幫助區分UL /李專注其中：

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> 

JQUERY

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; 
}); 

});