Question

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

我想在单击ESC时使用Javascript关闭菜单，或者如果用户点击菜单焦点之外的话。我如何实现这一目标？

我尝试过使用此代码：

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

但没有成功。

非常感谢这里的任何指导。

Answer 1

将您的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);
  }
});

这是工作fiddle

这是更新后的fiddle

Answer 2

使用此： -

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

FOR more info click here

Answer 3

元素不是你的DOM上的东西

$( elem ).hide();

您应该将其更改为您的班级或ID：

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

Answer 4

尝试使用以下内容：

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

Answer 5

您使用的解决方案基于使用隐藏复选框的CSS黑客。

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

所以替换：

$( elem ).hide();

使用：

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

Answer 6

以下代码将在按下转义

时折叠菜单

$(document).keyup(function(e) {

  if (e.keyCode == 27) { $("#nav-trigger").removeAttr("checked") }   
});

Answer 7

这是一个有效的JSFiddle：http://jsfiddle.net/e9wa0093/2/

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

修改

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

使用Javascript单击ESC时隐藏菜单

7 个答案: