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是否有类{{1} }}

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}

Answer 2

尝试使用keyup事件：Esc的密钥代码为27

＆＃13;

$(document).ready(function(){
$(".menu-toggle").on('click', function() {
  $(this).toggleClass("on");
  $('.menu-section').toggleClass("on");
  $("nav ul").toggleClass('hidden');  
});
$("#btn").click(function(){
$("section.menu-section").toggle();
});

$(document).keyup(function(e) {
     if (e.keyCode == 27) { // escape key maps to keycode `27`
     //also check here some another stuff like menu already opend or not
       $("section.menu-section").hide();
    }
});
})

＆＃13;

<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"></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>

<button id='btn'>HideShow Menu </button>

＆＃13;

带退出键的关闭菜单

2 个答案: