如何使用按键打开菜单？答案

【问题标题】：How to open a menu with keypresses?如何使用按键打开菜单？
【发布时间】：2013-03-25 10:24:58
【问题描述】：

我目前正在尝试为我设计我的第一个网站。我有一个菜单，默认情况下是隐藏的。当您按下导航栏中的按钮时，它会正常打开。

但我也想添加通过键执行此操作的可能性。 M = 打开菜单； ESC = 关闭菜单；

$(document).keydown(function(e) {
   if (e.keyCode == 77) {$('#Menu').collapse('show') ;}  ;
   if (e.keyCode == 27) {$('#Menu').collapse('hide') ;}  ;
}) ;

虽然这可以正常工作，但问题是，如果您连续按 M 键两次或更多次，中间没有按 ESC，菜单将不会再次打开。与 ESC 键相同。
此外，当菜单已经打开时，您按 M 会重新打开，这很难看。

所以我尝试将菜单的状态保存在一个名为 MenuToggled 的变量中。
为什么这不起作用？？

$(document).ready(function() {
    //different stuff...
    var MenuToggled = 0 ;
} ;

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

     if (e.keyCode == 77) {

        if (MenuToggled == 0) {$('#Menu').collapse('show') ; var MenuToggled = 1 ;} 
     } ;   

     if (e.keyCode == 27) {
        if (MenuToggled == 1) {$('#Menu').collapse('hide') ; var MenuToggled = 0 ;} 
     } ;   

});

看来，Jquery 甚至没有进入 keycode-if，因为我试图触发 .alert('test') ；事件，它在“第二个”代码中不起作用。

【问题讨论】：

var MenuToggled = 0 ; 将超出范围，因为它在 document.ready 函数中声明。将它移出那里，就在一般的 JavaScript 文件中
不要使用标志 > ，而是使用 $('#Menu').is(":visible")

标签： jquery menu key-events

【解决方案1】：

var menuToggled = false;
$(document).keydown(function(e){
    var action = false;

    switch(e.which){
        case 77:
            if(!menuToggled) action = 'show';
        break;

        case 27:
            if(menuToggled) action = 'hide';
        break;
    };

    if(action !== false){
        $('#Menu').collapse(action);
        menuToggled = !menuToggled;
        e.preventDefault();
    }
});

【讨论】：

【解决方案2】：

使用这个声明..e.preventDefault()

if (e.keyCode == 77) {
        e.preventDefault();
        if (MenuToggled == 0) {$('#Menu').collapse('show') ; var MenuToggled = 1 ;} 
     } ;   

     if (e.keyCode == 27) {
         e.preventDefault();
        if (MenuToggled == 1) {$('#Menu').collapse('hide') ; var MenuToggled = 0 ;} 
     } ;

【讨论】：