ESC 关闭 JS 菜单

Question

我正在开发一个简单的滑入式菜单系统。我希望能够通过按 ESC 键来关闭菜单。

这是我当前的代码： http://jsfiddle.net/3w539Lct/3/

我的第126行Javascript，你可以看到：

$( document ).on( 'keydown', function ( e ) {
            if ( e.keyCode === 27 ) { // ESC
                $(".menu-wrap").prop("checked", false);
            }
        });

但是，这不起作用。有人可以帮忙吗？

Answer 1

$(document).keyup(function(e) {
 if (e.keyCode == 27) {
     toggleMenu();
 }// escape key maps to keycode `27`
});

希望这对您有所帮助

Answer 2

在 isOpen 的条件下触发 toggleMenu。像这样：

$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        isOpen && toggleMenu();
    }
});

http://jsfiddle.net/3w539Lct/7/

Answer 3

我重复使用了您现有的一些函数和变量。这应该是正确的。

元素 $(."menu-wrap") 是 div，没有选中属性。您需要添加按下退出按钮时隐藏菜单的逻辑。

     $( document ).on( 'keydown', function ( e ) {
        if ( e.keyCode === 27 ) { // ESC
             isOpen && classie.remove( bodyEl, 'show-menu' );
        }
    });

这是一个有效的 demo

ESC 关闭 JS 菜单

Close JS Menu on ESC

html

css

jquery

keyboard-shortcuts

keyboard-events