Question

我使用的是jQuery 1.12。我有一个带LI元素的UL风格。当DIV具有焦点时，我使用以下代码使用键盘上的向上或向下箭头选择这些元素......

super.onDestroy();

问题是，如果您不断点击向下键（例如），最终您将无法看到所选项目。如何调整内容以使所选项始终可见？说明问题的小提琴在这里 - 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元素。

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

请参阅下面的代码段。

＆＃13;

$('.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);
  }
})

＆＃13;

<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>

＆＃13;

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

3 个答案: