Question

有些人可以将我的代码与键盘箭头集成，以尽可能少的代码上下导航菜单。我尝试了一些插件并进行了大量搜索但是我的小经验并没有帮助我！

$(function() {
$('ul.nav a').each(function(i, elem) {
$(elem).bind('click', function(event) {
    event.preventDefault();
    var offset = i * 38;
    $('ul.nav').stop().animate({backgroundPosition: '0 ' + offset + 'px'}, 2000,'easeOutQuart');

    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 2000,'easeOutQuart');
        $('ul.nav a').css({'cursor': 'pointer', 'color': '#643D21'});
        $anchor.css({'cursor': 'default', 'color': '#995D32'});
    event.preventDefault();
});
});
});

HTML代码

<ul class="nav">
<li><a href="#what">what</a></li>
<li><a href="#who">who</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#contact">contact</a></li>

理解的，

Answer 1

更新：为什么我不给你整件事？ http://jsfiddle.net/MwMt3/2

$(function() {
    var hgt = $('ul li:first').height();

    $('ul.nav a').each(function(i, elem) {
        $(elem).bind('click', function(event) {
            event.preventDefault();
            var offset = i * hgt;
            animate_bg(offset);

            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 800);
            $('ul.nav a').css({
                'cursor': 'pointer',
                'color': '#643D21'
            });
            $anchor.css({
                'cursor': 'default',
                'color': '#995D32'
            });
            event.preventDefault();
        });
    });

    $(document).keydown(function(e) {
        var bgtop = parseInt($('ul.nav').css("backgroundPosition").split(" ")[1], 10);
        var sel = Math.ceil(bgtop / hgt);
        if (e.keyCode == 39 || e.keyCode == 40) { // right, down
            if (sel < 0) {
                animate_bg(0);
            } else if (sel < $('ul.nav li').length - 1) {
                var offset = (sel + 1) * hgt;
                animate_bg(offset);
            }
        } else if (e.keyCode == 37 || e.keyCode == 38) { // left, up
            if (sel < 0) {
                var maxoffset = $('ul.nav li').length * hgt;
                animate_bg(maxoffset);
            } else if (sel > 0) {
                var offset = (sel - 1) * hgt;
                animate_bg(offset);
            }
        }
    });
});

function animate_bg(offset) {
    $('ul.nav').stop().animate({
        backgroundPosition: '0 ' + offset + 'px'
    }, 800);
}

Answer 2

如果您可以通过“上下导航菜单”更清楚地描述您的意思，将会有所帮助，但这是我的解释：http://jsfiddle.net/ebiewener/NknCW/2/

我们基本上只是将keydown事件绑定到页面，并检查按下的任一键是向上还是向下箭头：

$(function(){
    $(document).keydown(function(e){
        if(e.which === 38){ //up
            var currentLI = $('li.selected');
            var currentLIprev = currentLI.prev();
            if(currentLI.length > 0 && currentLIprev.length > 0){
                currentLI.removeClass('selected');
                currentLIprev.addClass('selected');
            }else{
                $('li:first').addClass('selected');
            }
        }else if(e.which === 40){ //down
            var currentLI = $('li.selected');
            var currentLInext = currentLI.next();
            if(currentLI.length > 0){
                if(currentLInext.length > 0){
                    currentLI.removeClass('selected');
                    currentLInext.addClass('selected');
                }
            }else{
                $('li:first').addClass('selected');
            }
        }
    });
});

在html菜单中使用键盘上下导航

2 个答案: