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

Question

我有一个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");
      }  
   }
}

我试图将焦点放在第一个项目上，然后使用键移动到每个节点。

Answer 1

我建议使用 jwerty，很棒的键盘事件库。

我使用了 jQuery 和 jWerty 插件。

这是一个快速的 JSFiddle：（单击预览窗口并开始按下向下键）

http://jsfiddle.net/8QZrV/

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

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

然后你把它挂在 jwerty 中，我想你想在那里做一些动作，所以我想你也应该 .focus() 当前元素。

享受！