導航長無序列表

Question

我有這個溢出的長列表：自動滾動它，我設置了鍵盤導航，問題是，當使用鍵盤時，它不能正確滾動！

檢查這個jsFiddle

$('ul').keydown(function (e) { 
    if (e.keyCode == 38) { // up 
     var selected = $(".selected"); 
     $listItems.removeClass("selected"); 
     if (selected.prev().length == 0) { 
      selected.siblings().last().addClass("selected"); 
     } else { 
      selected.prev().addClass("selected"); 
     } 
    } 
    if (e.keyCode == 40) { // down 
     var selected = $(".selected"); 
     $listItems.removeClass("selected"); 
     if (selected.next().length == 0) { 
      selected.siblings().first().addClass("selected"); 
     } else { 
      selected.next().addClass("selected"); 
     } 
    } 
}) 
}); 
$listItems.click(function() { 
if ($(this).is('.selected')) { 
    return true; 
} else { 
    $('li').removeClass('selected'); 
    $(this).addClass('selected'); 
} 

我要找的行爲是通過使用鍵盤元素的長列表滾動時的元素相同的行爲這個插件SelectBoxIt節目就是我要找的。

Answer 1

您可以使用此代碼代替，我用動畫功能到div內導航如果列表超過UL標籤的寬度：

http://jsfiddle.net/goldendousa/p6243/13/

$('ul').focus(function() { 
    if ($('ul li').is('.selected')) { 
     $('ul li').first().removeClass('selected'); 
    } else { 
     $('ul li').first().addClass('selected'); 
    } 
}); 
$('ul').keydown(function(e) { 
    if (e.keyCode == 38) { // up 
     e.preventDefault(); 
     var selected = $(".selected"); 
     $("ul li").removeClass("selected"); 
     if (selected.prev().length == 0) { 
      selected.siblings().last().addClass("selected");   
      var selectedTopOffset = selected.siblings().last().offset().top; 

       $('div').animate({ 
        scrollTop: selectedTopOffset 
       }, 200); 

     } else { 
      selected.prev().addClass("selected"); 

      var selectedTopOffset = $("div").scrollTop() + selected.position().top - $("div").height()/2 + selected.height()/2; 

       $('div').animate({ 
        scrollTop: selectedTopOffset 
       }, 200); 


     } 
    } 
    if (e.keyCode == 40) { // down 
     e.preventDefault(); 
     var selected = $(".selected"); 
     $("ul li").removeClass("selected"); 
     if (selected.next().length == 0) { 
      selected.siblings().first().addClass("selected"); 

      if (selected.siblings().first().offset().top < 0) { 
       $('div').animate({ 
        scrollTop: selected.siblings().first().offset().top 
       }, 200); 
      } 

     } else { 

      selected.next().addClass("selected"); 


      var selectedTopOffset = $("div").scrollTop() + selected.position().top - $("div").height()/2 + selected.height()/2; 

       $('div').animate({ 
        scrollTop: selectedTopOffset 
       }, 200); 

     } 
    } 
}); 

$('li').click(function() { 
    if ($(this).is('.selected')) { 
     return true; 
    } else { 
     $('li').removeClass('selected'); 
     $(this).addClass('selected'); 
    } 
});