我有一个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");
}
}
}
我正在尝试将焦点设置在第一个项目上,然后使用键移动到每个节点。
答案 0 :(得分:0)
我建议使用jwerty,非常棒的键盘事件库。
我使用了jQuery和jWerty插件。
这是一个快速的JSFiddle :(单击预览窗口并开始按下向下键)
作为一个基本的想法,你应该创建一个包含所有元素的对象,然后遍历它们,我的基本示例是这样的:
var i = 0;
j = jQuery('.navigator li').length;
然后你把它连接成jwerty,我想你想在那里做一些动作,所以我猜你也应该.focus()当前元素。
享受!