如何添加转义键以关闭移动导航

Question

基本上我在桌面上使用汉堡菜单(全屏覆盖(，并希望分配"Escape"键，以便用户能够关闭菜单。

目前这是我的标记

            <div id="myNav" class="overlay">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <div class="overlay-content">
                <a href="#">About</a>
                <a href="#">Services</a>
                <a href="#">Clients</a>
                <a href="#">Contact</a>
            </div>
        </div>
        <div><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span></div>

这是我旁边的 JS - 如果用户要单击关闭图标，它可以正常工作

function openNav() {
    document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}

因为我使用样式宽度 100% 来显示导航，而不是为其分配一个类，所以我有点卡住了。

任何帮助将不胜感激！

提前致谢

Answer 1

您必须将keypress或keyup事件侦听器添加到文档中，并检查按下的键是否esc(字符代码27(。

这是它的样子：

function closeNav() {
  alert('esc pressed');
}
document.addEventListener('keyup', function(e) {
  if (e.keyCode == 27) {
    closeNav();
  }
});

但是，当然，如果您想实现这一目标，那么移动设备中没有 esc 键。