Question

如何使用键上下导航（使用jQuery）通过此列表组？

<ul class="list-group">
    <li  class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
</ul>

感谢

Answer 1

将属性tabindex添加到<ul>，.bind() keydown添加到.list-group。
使用.last()和.first()确保其<li>的尺寸正常，并获得.index()。使用:eq()获取所需的<li>。

（您需要关注div才能使用它）

样品：

＆＃13;

$(function() {
   $('.list-group').focus();
});

const firstIndex = $(this).find('.list-group-item').first().index();
const lastIndex = $(this).find('.list-group-item').last().index();

$('.list-group').bind('keydown', function(e){
  var index = $(this).find('.active').index();
  
  switch(e.which){
    case 38:
      index = (index == firstIndex ? lastIndex : index - 1);
      break;
    case 40:
      index = (index == lastIndex ? 0 : index + 1);
      break;
  }
  
  $(this).find('.active').removeClass('active');
  $(this).find('.list-group-item:eq( '+ index +' )').addClass('active');
  
});

＆＃13;

.active{
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list-group" tabindex="0">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
</ul>

＆＃13;

如何通过键盘导航列表组（上/下）

1 个答案: