如何添加类并让孩子们关注keydown函数

Question

MARKUP

<ul class="focus">
    <li class="active"><a>Text 1</a></li>
    <li><a>Text 2</a></li>
    <li><a>Text 3</a></li>
    <li><a>Text 4</a></li>
    <li><a>Text 5</a></li>
    <li><a>Text 6</a></li>
    <li><a>Text 7</a></li>
    <li><a>Text 8</a></li>
    <li><a>Text 9</a></li>
    <li><a>Text 10</a></li>
    <li><a>Text 11</a></li>
    <li><a>Text 12</a></li>
</ul>

CSS

.focus{
    height:60px;
    list-style-type:none;
    overflow:auto;
}
.focus li a {
}
.focus li.active{
    background:#f6f6f6;
} 

查询

$( ".focus" ).keydown(function() {
  if (  KeyCode == 40 ) {
      $(this).next(li).addClass('active').children(a).focus();
});

对于这个标记，当按下向下箭头时，我需要向子li添加一个活动的类，并且活动的li需要集中注意力。我不知道如何进一步破解密码，任何人都无法解释。提前谢谢。

演示

Answer 1

演示Fiddle

您应该将tabindex添加到ul(<ul class="focus" tabindex='0'>(，并将href属性添加到a，然后使用以下内容：

$(".focus").keydown(function (e) {
    if (e.keyCode == 40) {    
        $('.active').removeClass('active').next('li').addClass('active').children('a').focus();
    }
});

当ul有焦点时，要删除它上的轮廓(Chrome(，可以使用CSS:

.focus:focus, .focus:active{
   outline:none;
}

添加tabindex可以选择ul，并且可以注册key事件。请注意，您还需要用语音标记将选择器括起来。

---

扩展演示

您还可以使用以下内容上下滚动/循环浏览所有项目：

$(".focus").keydown(function (e) {
    if (e.which == 40) {
        var next = $('.active').removeClass('active').next('li');
        next = next.length > 0 ? next : $('.focus li:eq(0)');
        next.addClass('active').children('a').focus();
    } else if (e.which == 38) {
        var prev = $('.active').removeClass('active').prev('li');
        prev = prev.length > 0 ? prev : $('.focus li').last();
        prev.addClass('active').children('a').focus();
    }
});

Answer 2

ul元素不是交互式的。这意味着keydown事件永远不会在其上激发。但是，您的a元素是，所以您可以将keydown事件分配给a元素。

首先，您需要为a元素赋予href属性，使其具有交互性：

<li>
    <a href="#">Text 2</a>
</li>

然后修改您的jQuery:

$('.focus').find('a').keydown(function(event) {
    if (event.which == 40)
        $(this).parent().next('li').addClass('active').children('a').focus();
});

此外，您应该使用event.which而不是KeyCode，因为jQuery将其规范化以在所有浏览器中工作：http://api.jquery.com/event.which/

JSFiddle演示。

Answer 3

查看jQuery事件文档，尤其是"event.wich"http://api.jquery.com/event.which/

Answer 4

试试这个：

var x=1;
$(document).keypress(function(e) {
  var code = e.keyCode || e.which;
  if ( code == 40 ) {
      $(".focus").children("li").removeClass('active');
      x++;
      if(x>  $(".focus li").length)
          x=1;
      $(".focus li:nth-child("+x+")").addClass('active');
  }
});

演示