HTML JQUERY在UL / LI上执行ARROW DOWN [英] HTML JQUERY implement ARROW DOWN ON UL/LI
问题描述
我只想通过使用箭头键进行导航。此外，我想要检测何时使用箭头键在LI上按下。但是我不能用箭头导航 - 我的keydown事件也不会触发。
< script src = Scripts / jquery-1.7.1.min.jstype =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_54514054class =sbOptionsstyle =>
< li>< a href =＃ - 1 = - 1> - 选择一个 - < / a>< / li>
< li>< a href =＃2 =2> Windows< / a>< / li>
< li>< a href =＃1 =1> Siding< / a>< / li>
< li>< a href =＃7 =7>屋顶< / a>< / li>
< / ul>
< / div>
如何 jsFiddle ？
基本上它维护一个简单的索引其中列表项目当前被选中。向上和向下箭头键绑定到keydown事件，如果有人按下列表顶部的向上箭头，顶部项目保持选中，反之亦然。
var chosen =;
$（document）.keydown（function（e）{// 38-up，40-down
if（e.keyCode == 40）{
if（chosen === ）{
selected = 0;
} else if（（selected + 1）< $（'li'）。length）{
selected ++;
}
$（'li'）。removeClass（'selected'）;
$（'li：eq（'+ chosen +'）'）。addClass（'selected'）;
return false;
$ b $ if if（e.keyCode == 38）{
if（selected ===）{
selected = 0;
} else if（选择> 0）{
selected--;
}
$（'li'）。removeClass（'selected'）;
$（'li：eq（'+ chosen +'） '）.addClass（'selected'）;
return false;
}
}）;
This is a simple requirement and I cannot make it work.
I simply want to navigate through a using arrow keys.Also I want to detect when a arrow key is pressed on a LI.However I cannot navigate with arrows- nor does my keydown event fire.
<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>
How about something like this jsFiddle?
Basically it maintains a simple index of which list item is currently selected. The up and down arrow keys are bound to the keydown event and if someone presses the up arrow at the top of the list, the top item stays selected and vice-versa.
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;
}
});
这篇关于HTML JQUERY在UL / LI上执行ARROW DOWN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
