Question

基本上我在桌面上使用汉堡包菜单（全屏叠加）并希望分配“逃脱”＃39;用户可以关闭菜单。

目前这是我的加价

            <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密钥。

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

1 个答案: