Jquery 如何使选定的LI保持可见（而不是隐藏）？

我正在使用jquery1.12。我有一个风格与李元素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");
    }
 });

---

问题是，如果连续单击向下键（例如），最终将无法看到所选项目。如何调整内容以使所选项目始终可见？说明问题的小提琴在这里--

您可以使用，

.offset（）

查找选择框和所选元素的顶部偏移量

然后，您可以使用

.scrollTop

进行设置，请尝试以下操作：

var yourSelectInput = $('.select');

var nextElementTop = $(nextElement).offset().top;  // get offset of element
var selectTop = yourSelectInput.offset().top;  // get offset of select input

// set the scrollTop to the scroll input offset
// plus the difference of the option top offset
yourSelectInput.scrollTop(yourSelectInput.scrollTop() + (nextElementTop - selectTop));

---

实现这一点的最简单方法是通过使用

tabIndex=“0”

允许关注li元素

聚焦新元素时，浏览器会自动滚动到选定元素

请参阅下面的代码片段

$（'.select options li'）。打开（'keydown'，函数（e）{
var key=e.which | e.keyCode；
var-nextElement=false；
开关（钥匙）{
案例38://以上
nextElement=$（this.prev（）.length？$（this.prev（）：$（this.parent（）.find（'li'）.last（）；
打破
案例40：
nextElement=$（this.next（）.length？$（this.next（）：$（this.parent（）.find（'li'）.first（）；
打破
};
if（nextElement）{
e、 预防默认值（）；
$（'.selected'）.removeClass（'selected'）；
nextElement.addClass（'selected'）.focus（）；
控制台日志（nextElement）；
}
})

选项1
选项2
选项3
选项4
选项5
选项6
选项7
选项8
选项9
选项10
选项11
选项12
选项13
选项14
选项15
选项16
选项17
选项18
选项19
选项20

在将类添加到

下一个事件的末尾，也可以调用它

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

更新的小提琴：
最好的办法是将其限制在屏幕高度内。这就是Facebook或谷歌所做的。Cna你编辑我的小提琴来说明你在说什么吗？如中所述，最简单的解决方案是使用jQuery UI
selectMenu
widget，它是可用的并经过充分测试的。你也可以看看他们的代码，看看他们是如何做到的。什么也没发生。当我点击“运行代码片段”时，我只看到一个虚线项目列表，上面写着“选项1”、“选项2”等。标记其中一个元素（焦点）用你的鼠标，使用向下/向上箭头来浏览它们。所以每次我选择一个看不见的元素时，它都会自动将该项目滚动到顶部？这可能适用于剪切向上箭头键，但我认为当单击向下箭头键时，这看起来很笨拙。我希望它的行为像一个选择菜单，它不会一直滚动到顶部。你应该能够使它这样，当你点击下来，所选的元素将滚动，使其出现在底部的选择输入列表弹出-up@Pineda对FF的限制仅适用于使用
scrollIntoViewOptions
参数。