Question

我正在尝试创建一个html＆amp; jQuery菜单使用箭头键进行导航，输入按钮“点击”所述菜单中的链接。

我创建了一个fiddle，菜单现已放在homepage of my website上，但这里是菜单HTML：

<ul id="home_menu">
        <li class="arrow-link"><a href="/blog/">Blog</a></li>
        <li><a href="/resume/">Resume</a></li>
        <li><a href="/portfolio/">Portfolio</a></li>
        <li><a href="/tools">Tutorials</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>

这是.arrow-link类：

.arrow-link{
   background: url(media/images/selectArrow.png) no-repeat;
   background-position: 0 3px;
}

如果您查看控制台，您可以看到我正在录制两个变量，位置计数器，表示<li>类应用于的.arrow-link元素（请参阅下面的脚本）和按键值，这是非常自我解释的。

我创建了一个非常简单的脚本，只是根据位置计数器值来切换.arrow-link类：

var pos = 1;

        jQuery(document).keydown(function (e) {

            switch (e.which) {

                case 38: // up

                    pos--;

                    if (pos > 5) {
                        pos = 1;
                    } else if (pos < 1) {
                        pos = 5;
                    }

                    moveArrow(pos, e.which);

                    break;

                case 40: // down

                    pos++;

                    if (pos > 5) {
                        pos = 1;
                    } else if (pos < 1) {
                        pos = 5;
                    }

                    moveArrow(pos, e.which);

                    break;

                case 13: // enter

                    console.log("Keystroke Value: " + e.which + " (Enter)");
                    jQuery('.arrow-link a').trigger("click");

                    break;


                default:
                    return; // exit this handler for other keys
            }
            e.preventDefault(); // prevent the default action (scroll / move caret)
        });

        function moveArrow(pos, e) {

            console.log("Position counter: " + pos);
            console.log("Keystroke Value: " + e);
            jQuery("#home_menu").children().removeClass("arrow-link");
            jQuery("#home_menu li:nth-child(" + pos + ")").addClass("arrow-link");

        }

所以从这个脚本我知道传递给case语句的值是正确的，我可以在按下enter按钮时生成输出到控制台，但是，在我尝试模拟点击的行上{{{ 1}}），没有任何反应。我没有在控制台中看到任何错误，它只是没有做任何事情。

我还尝试使用jQuery('.arrow-link a').trigger("click");而不是(".arrow-link a").click();但是再次使用，没有骰子。

我需要在那里使用什么才能将用户带到相应的链接？

Answer 1

甚至在＆＃39; a＆＃39;上触发点击。元素在jQuery中不起作用，但是，你可以简单地使用vanilla javascript：

document.querySelector('.arrow-link a').click();

你可以在这里看到一个工作小提琴：JSFiddle

这与此处的问题类似：Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

jQuery .trigger不会触发输入击键

1 个答案: