如何添加转义键关闭手机导航

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% 的样式来显示导航，而不是为其分配 class 我有点不明白。

如有任何帮助，我们将不胜感激！

提前致谢

Answer 1

您必须向您的文档添加一个 keypress 或 keyup 事件侦听器并检查按下的键是否为 esc（字符代码 27）。

这是它的样子：

function closeNav() {
  alert('esc pressed');
}

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

当然，移动设备中没有 esc 键，如果您想要实现的话。

如何添加转义键关闭手机导航

How to add escape key to close mobile navigation

javascript

jquery

html

fullscreen

keycode