Question

如WA-ARIA 1.0键盘交互中所述，我需要实现以下行为：

当子菜单打开并且焦点位于该子菜单中的菜单项时：

转义或左箭头键关闭子菜单并将焦点返回到父菜单项。

为实现这一目标，我在页面中添加了以下基本的javascript代码：

if (e.keyCode == 27) {
    element = document.getElementById("spanID");
    menuElement = document.getElementById("bigMenu");
    if (element.className == "glyphicon glyphicon-menu-down") {
        element.className = "glyphicon glyphicon-menu-right";
        jQuery("#collapseMenu").hide();
        menuElement.setAttribute('aria-expanded', false);
        sessionStorage.setItem("expand", false);
    }
}

这不起作用，所以这不是正确的方法。有人可以指出我做错了什么。

Answer 1

如果你已经使用jQuery，那么就一直这样。

$(document).on('keypress', function(e){
    if (e.keyCode == 27 || e.keyCode == 37) { // escape or left key

        var element = $("#spanID"),
            menuElement = $("#bigMenu");

        if (element.hasClass('glyphicon') && element.hasClass('glyphicon-menu-down')) {
            element.removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right');
            $("#collapseMenu").hide();
            menuElement.attr('aria-expanded', 'false');
            sessionStorage.setItem("expand", false);
        }
    }
});

Answer 2

试试这个

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        alert("Escape");
        // Here is your code for hiding menu.
    }
};

触发jQuery（＆＃34;＃collapseMenu＆＃34;）。hide（）;按Esc键

2 个答案: