如何保持选定的 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");
    }
 });

问题是，如果您连续单击向下键（例如），最终您将无法看到所选项目。如何调整以使所选项目始终可见？说明问题的小提琴在这里——http://jsfiddle.net/sge8g5qu/1/。

Answer 1

在您将类添加到 nextElement 的最后，也调用 .scrollIntoView( false )。

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

更新小提琴：http://jsfiddle.net/gaby/6fjnnu55/

Answer 2

您可以使用 .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));

Answer 3

实现这一点的最简单方法是使用tabIndex="0" 将焦点放在 li 元素上。

当您聚焦一个新元素时，浏览器会自动滚动到所选元素。

参见下面的 sn-p。

$('.select-options li').on('keydown', function (e) {
  var key = e.which || e.keyCode;
  var nextElement = false;
  
  switch (key) {
    case 38: //Up
      nextElement = $(this).prev().length ? $(this).prev() : $(this).parent().find('li').last();
      break;
    case 40:
      nextElement = $(this).next().length ? $(this).next() : $(this).parent().find('li').first();
      break;
  };
   
  if (nextElement) {
    e.preventDefault();
     
    $('.selected').removeClass('selected');
    nextElement.addClass('selected').focus();
    
    console.log(nextElement);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="select-options">
  <li tabindex="0">Option 1</li>
  <li tabindex="0">Option 2</li>
  <li tabindex="0">Option 3</li>
  <li tabindex="0">Option 4</li>
  <li tabindex="0">Option 5</li>
  <li tabindex="0">Option 6</li>
  <li tabindex="0">Option 7</li>
  <li tabindex="0">Option 8</li>
  <li tabindex="0">Option 9</li>
  <li tabindex="0">Option 10</li>
  <li tabindex="0">Option 11</li>
  <li tabindex="0">Option 12</li>
  <li tabindex="0">Option 13</li>
  <li tabindex="0">Option 14</li>
  <li tabindex="0">Option 15</li>
  <li tabindex="0">Option 16</li>
  <li tabindex="0">Option 17</li>
  <li tabindex="0">Option 18</li>
  <li tabindex="0">Option 19</li>
  <li tabindex="0">Option 20</li>
</ul>