如何在按下键盘上的键时激活我的"off-canvas"导航

Question

当我按" M"键时，我一直在寻找一种激活我的" off-canvas"导航的方法。

我会更具体地说，当我按下键盘上的" M"键时，我希望我的"离与玻璃瓦斯"导航滑入或流下。

我已经有了"离 - 瓦斯"导航的基本功能。我只是卡在了按键的东西上。

谢谢！

Answer 1

我在Mousetrap插件方面有很好的经验。使用它，您可以轻松地绑定按键/组合并使用它执行代码。除其他外，它会自动处理输入是否专注（在这种情况下，您不想执行键键）

没有看到您的代码，我猜在OffCanvas导航中，您的意思是您在移动页面中看到的导航菜单，通过按下按钮打开？

在这种情况下，您可以使用以下内容：

Mousetrap.bind('m', function() { 
    $("#your_menu_toggle_button").trigger("click");
});

Answer 2

如果您不在乎哪个元素具有焦点，则可以将事件处理程序绑定到窗口

// Jquery:
$(window).on('keypress', callBack);
// JS:
window.onkeypress = callBack;

并检查键（http://www.mediaevent.de/javascript/onkeydown.html）

var callBack = function(event){
    // checking for 'm' and 'M' cross-Browser compatible
    var pressedM = (event.keyCode == 77 || event.keyCode == 109
                   || event.which == 77 || event.keyCode == 109)
    if (pressedM){
       /* logic here */
    }
}

然后，您需要定义，如何激活导航以及如何停用。您谈论的是将其滑入它，所以我想您现在想使用Jquerys slidetoggle（）功能之类的东西：

...
/* logic here */
$('#offCanvasNav').animate({height: 'toggle'}); 
// same as .slideToggle() change height for width for sideways slide

jQuery .slidetoggle（）水平替代方案？-http：//jsfiddle.net/7zbqa/