我正在尝试将键盘导航添加到菜单(基于ul li ),我已将keydown事件绑定到菜单(或者我应该将keydown绑定到文档?)
使用的处理函数如下所示
KeyDown: function(e) {
var toFocus = false;
if (e.keyCode == 38) {
toFocus = $((e.target/* li */).next()[0]);
}
if (e.keyCode == 40) {
toFocus = $((e.target).next()[1]);
}
if (toFocus) {
$(e.target).attr('tabIndex', '-1');
$(toFocus).attr('tabIndex', '0');
toFocus.focus();
return false;
}
}
这里我得到 e.target为html 而不是li?
你可以建议任何其他方式来添加键盘导航吗?
答案 0 :(得分:1)
答案 1 :(得分:1)
尝试使用自定义属性来保持tabid上下。
...KeyDown: function(e) {
var Direction;
if (e.keyCode == 38)
Direction = "toUp";
else Direction = "toDown";
var Focus = $("li[tabid=\""$(e.target.id).attr(Direction)"\"]");
Focus.focus();
}
---
<li ... tabid="1" toUp="-1" toDown= "2" />
<li ... tabid="2" toUp= "1" toDown= "3" />
<li ... tabid="3" toUp= "2" toDown= "4" />
<li ... tabid="4" toUp= "3" toDown="-1" />
上面的代码只是为了表明这个想法,现在已经很晚了,我没有时间去测试它。所以请不要因为不工作而投票给我。
希望有所帮助