我遵循了以下教程,该教程应该允许键盘滚动和选择无序列表项->教程
我将它与所描述的建议框一起使用 ->建议框
请注意,除了更改 ID 和姓名外,我都遵循了这两个原则。
它似乎确实有效(当我按下悬停效果时确实显示),但在我放开键后它立即消失。如果我按住向下箭头,它会滚动到我的列表底部,但是一旦松开键,悬停效果就会立即消失。JQuery 绝不是我的强项,所以我不确定我做错了什么。我完全按照教程中的描述使用代码。我只将#menu 更改为#suggestions,因为这是我的div 的名称。
然而,这里是代码:
var currentSelection = 0;
var currentUrl = '';
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
// Register keypress events on the whole document
$(document).keypress(function(e) {
switch(e.keyCode) {
// User pressed "up" arrow
case 38:
navigate('up');
break;
// User pressed "down" arrow
case 40:
navigate('down');
break;
// User pressed "enter"
case 13:
if(currentUrl != '') {
window.location = currentUrl;
}
break;
}
});
// Add data to let the hover know which index they have
for(var i = 0; i < $("#suggestions ul li a").size(); i++) {
$("#suggestions ul li a").eq(i).data("number", i);
}
// Simulote the "hover" effect with the mouse
$("#suggestions ul li a").hover(
function () {
currentSelection = $(this).data("number");
setSelected(currentSelection);
}, function() {
$("#suggestions ul li a").removeClass("itemhover");
currentUrl = '';
}
);
});
function navigate(direction) {
// Check if any of the menu items is selected
if($("#suggestions ul li .itemhover").size() == 0) {
currentSelection = -1;
}
if(direction == 'up' && currentSelection != -1) {
if(currentSelection != 0) {
currentSelection--;
}
} else if (direction == 'down') {
if(currentSelection != $("#suggestions ul li").size() -1) {
currentSelection++;
}
}
setSelected(currentSelection);
}
function setSelected(menuitem) {
$("#suggestions ul li a").removeClass("itemhover");
$("#suggestions ul li a").eq(menuitem).addClass("itemhover");
currentUrl = $("#suggestions ul li a").eq(menuitem).attr("href");
}
有人可以在这件事上帮助我吗?