仅使用javascript在嵌套列表上进行键盘导航

时间:2013-08-26 18:58:24

标签: javascript html css accessibility

我有一个ul列表,如下所示。我是JS的新手并试图进行键盘导航,只使用javascript的箭头键。

<ul id= nav>
 <li class =subnav id =sub1> Companies
  <ul id = hidden>
   <li> item 1 </li>
   <li> item 2 </li>
   <li> item 3 </li>
  </ul>
 </li>
 <li class =subnav id =sub2> LINKS
  <ul id = hidden>
   <li> item 4 </li>
   <li> item 5 </li>
   <li> item 6 </li>
  </ul>
 </li>  
</ul>

我的JS:

ul = document.getElementById("nav");
li = ul.getElementsByClassName("subnav");
ul2 = document.getElementById("hidden");
li = ul.getElementsByTagName("li");


function keyPress(e)
{
   var e = e||window.event;
   e =e.which||e.keyCode;

   for( var i=0; i<li.length; i++)
   {
      var  f = li[i].childNodes[0]; 
      if(li[i].children.length > 0)
      {
         for(var j=0; j<li2.length; j++)
         {
            var x = li2[j].childNodes[0];
         }
      }
      else
      {
         alert("no child nodes");
      }  
   }
}

我正在尝试将焦点设置在第一个项目上,然后使用键移动到每个节点。

1 个答案:

答案 0 :(得分:0)

我建议使用jwerty,非常棒的键盘事件库。

我使用了jQuery和jWerty插件。

这是一个快速的JSFiddle :(单击预览窗口并开始按下向下键)

http://jsfiddle.net/8QZrV/

作为一个基本的想法,你应该创建一个包含所有元素的对象,然后遍历它们,我的基本示例是这样的:

    var i = 0;
    j = jQuery('.navigator li').length;

然后你把它连接成jwerty,我想你想在那里做一些动作,所以我猜你也应该.focus()当前元素。

享受!