jquery - 如何使选定的 LI 保持可见(不隐藏)？

Question

我正在使用 jQuery 1.12。我有一个带 LI 元素的样式化 UL。当 DIV 具有焦点时，我使用下面的代码使用键盘上的向上或向下箭头选择这些元素 ...

 $(".select").bind('keydown', function(event) {
    var currentElement = $(this).find(".select-options li.selected");
    if (currentElement.length == 0) {
        currentElement = $(this).find(".select-options li")[0];
      $(currentElement).addClass("selected");
      return;
    }       // if
    var nextElement;
    switch(event.keyCode){
    // case up
    case 38:
        nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) - 1) % $(this).find(".select-options li").length];
        break;
    case 40:
        nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) + 1) % $(this).find(".select-options li").length];
      break;
    }
    $(this).find(".select-options li").removeClass("selected");
    if(nextElement !== null) {
        $(nextElement).addClass("selected");
    }
 });

问题是，如果您连续点击向下键(例如)，最终您将无法看到所选元素。我该如何调整以使所选元素始终可见？说明问题的 fiddle 在这里 -- http://jsfiddle.net/sge8g5qu/1/ .

Answer 1

在将类添加到 nextElement 调用的末尾 .scrollIntoView( false )也在上面。

if(nextElement !== null) {
    $(nextElement).addClass("selected");
    nextElement.scrollIntoView(false); // added this line
}

更新 fiddle :http://jsfiddle.net/gaby/6fjnnu55/