使用 Javascript 单击 ESC 时隐藏菜单

Hide menu when ESC clicked using Javascript

本文关键字：隐藏菜单 ESC 单击 Javascript 使用      更新时间：2023-09-26

我目前正在自定义屏幕外导航菜单。

我想使用 Javascript 在单击 ESC 或用户单击菜单焦点之外时关闭菜单。我如何实现这一点？

这是我的例子：http://jsfiddle.net/q55xtcw4/

我尝试使用此代码：

$( document ).on( 'click', function ( e ) {
    if ( $( e.target ).closest( elem ).length === 0 ) {
        $( elem ).hide();
    }
});
$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        $( elem ).hide();
    }
});

但没有成功。

非常感谢此处的任何指导。

肮脏但有用的解决方案，您可以将JS代码更改为此

$(".nav-trigger").click(function(e){e.stopPropagation()})
$( document ).on( 'click', function ( e ) {
    $( ".nav-trigger" ).prop("checked",false);
});
$( document ).on( 'keydown', function ( e ) {
  if ( e.keyCode === 27 ) { // ESC
      $( ".nav-trigger" ).prop("checked",false);
  }
});

这是工作小提琴

这是更新的小提琴

这是一个工作的 JSFiddle： http://jsfiddle.net/e9wa0093/2/

基本上，您的示例中未定义elem。与show()和hide()方法相同。我对代码所做的更改仅更新用于控制菜单位置（即可见性）的隐藏复选框的 checked 属性。

编辑：

更正了 JSFiddle，如下所述： http://jsfiddle.net/e9wa0093/4/

使用这个：-

$(document).keyup(function(e) {
      if (e.keyCode == 13) $('.save').click();     // enter
      if (e.keyCode == 27) $('.cancel').click();   // esc
    });

欲了解更多信息，请单击此处

elem 不是你的 DOM 上的东西

$( elem ).hide();

您应该将其更改为您的类或 ID，例如：

$('#menu').hide();

尝试使用这样的东西：

 <script>
   $(document).ready(function(){ 
     $(document).keypress(function (evt) {
       //Determine where our character code is coming from within the event
       var charCode = evt.charCode || evt.keyCode;
       if (charCode  == 27) { //Enter key's keycode
         //do what ever you want
         $('#someid').hide();
       }
     });
   }); 

 </script>

您正在使用的解决方案基于使用隐藏复选框的 CSS hack。

您可以通过切换此复选框的值来控制菜单的状态，而不是使用 javascript 隐藏菜单。 使用 javascript 隐藏菜单实际上会破坏 CSS hack，因为 CSS 取决于菜单是否可见，但只是从屏幕一侧偏移。

所以替换：

$( elem ).hide();

跟：

$("#nav-trigger").click();

下面的代码将在按 Esc 时折叠菜单

$(document).keyup(function(e) {
  if (e.keyCode == 27) { $("#nav-trigger").removeAttr("checked") }   
});
相关文章：