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

JQUERY

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

对于此标记，当按下向下箭头并且活动li需要聚焦时，我需要向子li添加一个活动的类。我不知道如何打破代码进一步任何人都可以解释。提前谢谢。

DEMO

Answer 1

Demo 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个事件可以注册。请注意，您还希望将带有语音标记的选择器括起来。

Extended Demo

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

$(".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 demo

Answer 3

详细了解jQuery事件文档＆＃34; event.which＆＃34; 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');
  }
});

DEMO

如何添加类并将孩子集中在keydown函数上

4 个答案:

Demo Fiddle

Extended Demo