我有这些文本字段和下拉菜单的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“的”悬停“状态,以此类推?
发布于 2011-04-04 20:55:11
您不能完美地模拟悬停状态。添加具有相同风格的“真正”类是无法避免的:
.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);
}
这将“记住”最后一个“选定”元素的索引,并切换到下一个或前一个元素,使用eq()
函数并将上面的类添加到该选定元素。
发布于 2011-04-04 20:47:34
当然是丑陋的。在fiddle here上。
<script src="jquery.js"></script>
<script>
$(function (){
$('.display_box').hover(function (){
$(this).attr('class', 'display_box current')
}, function (){
$(this).attr('class', 'display_box');
});
$('#search').keyup(
function (e){
var curr = $('#display').find('.current');
if (e.keyCode == 40)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).next().attr('class', 'display_box current');
}
else{
$('#display div:first-child').attr('class', 'display_box current');
}
}
if(e.keyCode==38)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).prev().attr('class', 'display_box current');
}
else{
$('#display div:last-child').attr('class', 'display_box current');
}
}
}
)
});
</script>
<style>
.current{
background:#3b5998;
color:#FFFFFF;
}
</style>
<input type="text" id="search" name="search_fld"/>
<div id="display">
<div class="display_box current">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>
发布于 2013-06-12 03:17:17
为了实现自动提示文本字段,最好使用'datalist‘标签,如下所示:
<input list="search" name="search_fld"/>
<datalist id="search">
<option value="Luca"/>
<option value="David"/>
<option value="Mark"/>
</datalist>
有关datalist标签的更多详细信息,请访问此处:http://www.w3schools.com/tags/tag_datalist.asp
https://stackoverflow.com/questions/5538024
复制相似问题