触发 jQuery("#collapseMenu").hide();按 Esc 键答案

【问题标题】：Triggering jQuery("#collapseMenu").hide(); on pressing Esc key触发 jQuery("#collapseMenu").hide();按 Esc 键
【发布时间】：2015-02-18 17:22:33
【问题描述】：

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

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

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

为了实现这一点，我在我的页面中添加了以下基本的 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);
    }
}

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

【问题讨论】：

你为什么不用$("#collapseMenu").hide();？

标签： javascript jquery

【解决方案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);
        }
    }
});

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：