javascript - 使用退出键关闭菜单

Question

我有这个 jquery 切换菜单，目前我只能在按下 X 按钮时关闭它。我想要实现的是也使用转义键将其关闭。将不胜感激我能得到的任何帮助。以下是所使用的代码示例。

HTML

 <section class="menu-section">
  <div class="menu-toggle">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <nav class="nav-hide">
        <ul role="navigation" class="hidden">
            <li><a href="#">work</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">resume</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>
</section>

这是 JS。

$(".menu-toggle").on('click', function() {
  $(this).toggleClass("on");
  $('.menu-section').toggleClass("on");
  $("nav ul").toggleClass('hidden');  
});

Answer 1

Esc 的关键代码是 27 ，所以你可以询问是否按下了，如果按下了，则询问我们的nav ul是否按下了。没有课hidden

$(".menu-toggle").on('click', function() {
  $(this).toggleClass("on");
  $('.menu-section').toggleClass("on");
  $("nav ul").toggleClass('hidden');  
});

$(document).keyup(function(e) {
     if (e.keyCode == 27) { // escape key maps to keycode `27`
       if (!$("nav ul").hasClass("hidden")) {$("nav ul").toggleClass("hidden")}
    }
});

.hidden{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="menu-section">
  <div class="menu-toggle">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
  </div>
  <nav class="nav-hide">
        <ul role="navigation" class="hidden">
            <li><a href="#">work</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">resume</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>
</section>