Question

如何使用jquery保持滚动跳过列表中的项目？使用鼠标将鼠标悬停在列表中的列表项上时没有问题。但是当使用向上/向下箭头键滚动列表时，某些项目会跳过或看起来会跳过。

例如，如果所选项目是项目6，则在使用向上箭头键时它可以跳过下一个序列项目（项目5）。

项目1 第2项第3项第4项第5项第6项

$(document).ready(function(){
    $('li').hover(function(){
        j = $(this).parents("ul").find("li").index($(this));
        $('.hoverColor').removeClass('hoverColor');
        $(this).addClass('hoverColor');
    }); 
    j = -1;
    $(document).keyup(function(e) {
        if(e.keyCode == 38) // The Up arrow key 
        {
            if(--j>0) {
                j = 0;
            }
            $("li").removeClass('hoverColor');
            $("li:eq(" + j + ")","ul").addClass('hoverColor');
        } else if (e.keyCode == 40) {
            if(++j  >$("li", "ul").length-1){
                j = $("li", "ul").length-1;
            }
            $("li","ul").removeClass('hoverColor');
            $("li:eq(" + j + ")","ul").addClass('hoverColor');

        }
    });
});

这是html代码

测试焦点

$（文件）。就绪（函数（）{ $（ '礼'）。悬停（函数（）{ j = $（this）.parents（“ul”）。find（“li”）。index（$（this））; $（ 'hoverColor。 '）removeClass（' hoverColor'）。 $（本）.addClass（ 'hoverColor'）; }）; j = -1; $（document）.keyup（function（e）{ if（e.keyCode == 38）//向上箭头键 { if（ - j $（“li”，“ul”）。length-1） { j = $（“li”，“ul”）。length-1; } $（ “礼”， “UL”）removeClass（ 'hoverColor'）。 $（“li：eq（”+ j +“）”，“ul”）。addClass（'hoverColor'）; // var str = $（“li：eq（”+ j +“）”，“ul”）。text（）; // $（“li：eq（”+ j +“）”，“ul”）。scrollTop（str2.top）; // $（“＃textArea”）。insertAtCaret（str）; } }） }）;

.hoverColor { 背景色：＃408080; 白颜色; } 里 { 列表样式类型：无; 列表样式位置：内; text-align：left; margin-left：8px; 填充：0px } DIV { 溢出：滚动; 宽度：200px; 身高：300px; }

测试1

测试2

测试3

测试4

测试5

测试6

测试7

测试8

测试9

测试1

测试2

测试3

测试4

测试5

测试6

测试7

测试8

测试9

Answer 1

$(document).ready(function(){
    $('li').hover(function(){
        j = $(this).parents("ul").find("li").index($(this));
        $('.hoverColor').removeClass('hoverColor');
        $(this).addClass('hoverColor');
    }); 
    j = -1;
    $(document).keyup(function(e) {
        if(e.keyCode == 38) // The Up arrow key 
        {
          //  if(--j>0) {
          //      j = 0;
          //  }
            $("li").removeClass('hoverColor');
            $("li:eq(" + j + ")","ul").addClass('hoverColor');
        } else if (e.keyCode == 40) {
            if(++j  >$("li", "ul").length-1){
                j = $("li", "ul").length-1;
            }
            $("li","ul").removeClass('hoverColor');
            $("li:eq(" + j + ")","ul").addClass('hoverColor');

        }
    });
});

如何使用jquery保持滚动跳过列表中的项目？

1 个答案: