Jquery箭头键导航

前端之家收集整理的这篇文章主要介绍了Jquery箭头键导航前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有像自动提示这样的Facebook的文本字段和下拉菜单
<input type="text" id="search" name="search_fld"/>

<div id="display">
<div class="display_Box">Luca</div>
<div class="display_Box">David</div>
<div class="display_Box">Mark</div>
<div class="display_Box">...</div>
</div>

我的CSS:

.display_Box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

如何通过向下箭头键将“悬停”状态从我的输入“search_fld”传递到第一个“display_Box”,依此类推所有“display”div?

这是一个link the jsfiddle code.

解决方法

您无法完美地模拟悬停状态..添加具有相同样式的“真实”类无法逃脱:
.display_Box_hover,.display_Box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

现在这段代码将“导航”元素:

window.displayBoxIndex = -1;

$("#search").keyup(function(e) 
{
        if (e.keyCode == 40) 
        {  
            Navigate(1);
        }
        if(e.keyCode==38)
        {
            Navigate(-1);
        }

});

var Navigate = function(diff) {
    displayBoxIndex += diff;
    var oBoxCollection = $(".display_Box");
    if (displayBoxIndex >= oBoxCollection.length)
         displayBoxIndex = 0;
    if (displayBoxIndex < 0)
         displayBoxIndex = oBoxCollection.length - 1;
    var cssClass = "display_Box_hover";
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}

这将“记住”最后一个“selected”元素的索引并切换到next或prevIoUs元素,使用eq()函数并将上面的类添加到所选元素.

Updated jsFiddle.

猜你在找的jQuery相关文章