エスケープキーでメニューを閉じる

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>

クラスを持っている場合は、尋ねます

Answer 2

keyupイベントで試してください：Escのキーコードは27

$(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(); 
 
    } 
 
}); 
 
})

<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>

です3210