嵌套列表上的键盘导航只能使用javascript

-2

我有一个ul列表，如下所示。我是JS的新手，并试图做一个键盘导航，只使用JavaScript的箭头键。嵌套列表上的键盘导航只能使用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"); 
     } 
    } 
}

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

来源

2013-08-26 user2697346

告诉我们你到目前为止尝试过的东西 –

你可以使用aria角色和tabIndex来做到这一点......下面是一个例子。 http://msdn.microsoft.com/en-us/library/windows/apps/hh700327.aspx –

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

我用jQuery和jWerty插件。

这里是一个快速的jsfiddle：（点击预览窗口，并开始打向下键）

http://jsfiddle.net/8QZrV/

作为一个基本的想法，你应与所有的元素创建一个对象，然后遍历它们，我的基本的例子是这样的：

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

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

享受！

来源

2013-08-26 19:16:25

嵌套列表上的键盘导航只能使用javascript

回答

相关问题