1

我遵循了以下教程,该教程应该允许键盘滚动和选择无序列表项->教程

我将它与所描述的建议框一起使用 ->建议框

请注意,除了更改 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");
}

有人可以在这件事上帮助我吗?

4

1 回答 1

1

你可以试试这个插件http://plugins.jquery.com/keyscroll/,允许在列表中上下滚动

于 2013-02-14T17:50:11.400 回答