这是一个简单的要求，我无法使其工作。
我只是想使用箭头键进行导航。此外，我想检测何时在 LI 上按下箭头键。但是我无法使用箭头进行导航 - 我的 keydown 事件也不会触发。
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("li,a").keydown(function () {
alert("kd");
});
});
</script>
</head>
<body>
<div>
<input type="text" />
<ul id="sbOptions_54514054" class="sbOptions" style="">
<li><a href="#-1" rel="-1">--Select one--</a></li>
<li><a href="#2" rel="2">Windows</a></li>
<li><a href="#1" rel="1">Siding</a></li>
<li><a href="#7" rel="7">Roofing</a></li>
</ul>
</div>
像这样的事情怎么样jsFiddle?
基本上它维护当前选择的列表项的简单索引。向上和向下箭头键绑定到 keydown 事件，如果有人按列表顶部的向上箭头，则顶部项目保持选中状态，反之亦然。
var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
if (e.keyCode == 40) {
if(chosen === "") {
chosen = 0;
} else if((chosen+1) < $('li').length) {
chosen++;
}
$('li').removeClass('selected');
$('li:eq('+chosen+')').addClass('selected');
return false;
}
if (e.keyCode == 38) {
if(chosen === "") {
chosen = 0;
} else if(chosen > 0) {
chosen--;
}
$('li').removeClass('selected');
$('li:eq('+chosen+')').addClass('selected');
return false;
}
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
