javascript - 导航长无序列表

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 标签的宽度，我使用动画函数在 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');
    }
});