导航长长的无序列表

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

您可以使用此代码代替，如果列表超过ul标签的宽度，我使用Animate函数在div内部导航：

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