顯示操作在按鍵上不起作用，但在點擊功能上起作用

Question

我已經搜索，但無法找到解釋我的問題。

我有一個菜單有三個項目，每個項目都有三個子菜單。我想通過按鍵打開活動菜單項的子菜單。

我可以在$(this).parent().find('.submenu').show();上實現點擊功能，但它不適用於keydown函數。如果我爲相應的鍵做$('.submenu').show();，它可以工作，但所有子菜單都會顯示。所以如果有人能夠解釋我不明白的事情，以及我應該怎麼做才能使當前的子菜單顯示在按鍵上，我將非常感激！

這是按鍵的功能：

switch(e.keyCode) 
    {  
     // left key 
     case arrow.left: 

     break; 

     // up key 
     case arrow.up: //this works 
      $('a:focus').closest('li').prev().find('a.option').focus(); 
     break; 

     // right key 
     case arrow.right: 
      $('.submenu').show(); //this works but shows all the submenus 
     break; 

     // down key 
     case arrow.down: //this works 
      $('a:focus').closest('li').next().find('a.option').focus(); 
     break; 
    } 

這是點擊功能，其工作原理：

$('a').click(function() { 

    this.focus(); 

    $(this).parent().find('.submenu').show(); 

}); 

這裏是我的代碼小提琴：fiddle

Answer 1

在你開關您要求它顯示所有.submenu項目，而在點擊時您將其縮小到與點擊迭代相關的.submenu米在您切換語句可以使用相同的方法，並且只打開其中的相關a元素具有焦點項目：

case arrow.right: 
    $('a:focus').parent().children('.submenu').show(); 
    //... 

jsfiddle

編輯：

要改變焦點的子菜單項，你只需抓住剛剛打開的子菜單中的第一項並設置焦點（）。

既然你已經加入集中在a元素我一直是一樣的，但是你的sumbenues使用不同的結構（.option爲a元素，但對於.suboption元素li等）

// left key 
case arrow.left: 
    //now you want to change the focus back on main menu item I presume? 
    $('a:focus').closest('.submenu').hide().parent().children('a').focus(); 
    break; 
//right key 
case arrow.right: 
    $('a:focus').parent().children('.submenu').show().find('a:first').focus(); 
    break; 

edited jsfiddle

Answer 2

試試這個：

case arrow.right: 
       $('a:focus').next().show(); 

還

// hide submenu on default 
    $('ul li ul').hide(); 
    $(document).off(); 
    $(document).keydown(function(e) { 

     e.preventDefault(); 


     // declare variable for submenu 
     var menu = $('ul'); 
     var submenu = $('ul li ul'); 

     // declare variables for the keys 
     var keyCode = e.keyCode || e.which, 
      arrow = {left: 37, up: 38, right: 39, down: 40}; 



     switch(e.keyCode) 
     {  
      // left key 
      case arrow.left: 

      break; 

      // up key 
      case arrow.up: //this works 
       $('a:focus').closest('li').prev().find('a.option').focus(); 

      break; 

      // right key 
      case arrow.right: 
       $('a:focus').next().show(); //this works but shows all the submenus 

      break; 

      // down key 
      case arrow.down: //this works 
       $('a:focus').closest('li').next().find('a.option').focus(); 
      break; 
     } 
    console.log(123,$(':focus')); 
    }); 

    $('a').click(function() { 

     this.focus(); 

     $(this).parent().find('.submenu').toggle(); 

    }); 

jsfiddle