导航长无序列表答案

【问题标题】：Navigating long un-ordered list导航长无序列表
【发布时间】：2014-01-13 06:55:24
【问题描述】：

我有这个带有溢出的长列表：自动滚动它，我将它设置为键盘导航，问题是使用键盘时它不能正确滚动！

检查这个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 显示了我正在寻找的东西。

【问题讨论】：

标签： javascript jquery navigation keyboard html-lists

【解决方案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');
    }
});

【讨论】：