触发jQuery(“#collapseMenu”）.hide(）;按Esc键

Triggering jQuery("#collapseMenu").hide(); on pressing Esc key

本文关键字：Esc hide jQuery #collapseMenu 触发      更新时间：2024-01-19

如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);
    }
}

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

如果您已经在使用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);
        }
    }
});

试试这个

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