Как открыть/парения к пунктам подменю с помощью сочетания клавиш

Question

у меня есть меню, как

<li class="main-menu"> 
    <a accesskey="a">menu item 1</a> 
    <ul> 
    <li> 
     <a accesskey="d">submenuItem1</a> 
    </li> 
    <li class="submenu"> 
     <a accesskey="e">submenuItem2</a> 
     <ul> 
     <li class="innermenu"><a >innerMenuItem1</a></li> 
     <li><a>innerMenuItem1</a></li> 
     <li><a>innerMenuItem2</a></li> 
     <li><a>innerMenuItem3</a></li> 
     <li><a>innerMenuItem4</a></li> 
     </ul> 
    </li> 
    </ul> 
</li> 

Как парить/показать подменю при выборе главного меню и подменю, когда выбран показ innermenu пунктов. Я новичок в JQuery есть некоторые проблемы в сделать это esspecially подменит для внутреннего menu.Thank вас ..

Answer 1

accesskey на самом деле работает только в сочетании с альтом ключом, мы можем перехватить общее KeyDown события и обрабатывать горячие клавиши, которые путь. Если мы перехватим keydown и это один из ключей, мы хотим переключить класс .active на соответствующий li. Затем используйте CSS для скрытия и отображения подменю на основе состояния hover/class.

В моем примере ниже используется атрибут data-key для настройки атрибутов, при загрузке страницы мы извлекаем ключи и связанные элементы в массив. Этот массив сканируется и обрабатывается, когда обрабатывается keydown.

jsFiddle

HTML

<ul class="main-menu"> 
<li data-key="65"> 
    <a>menu item 1 (a)</a> 
    <ul> 
    <li data-key="68"> 
     <a>submenuItem1 (d)</a> 
    </li> 
    <li data-key="69"> 
     <a>submenuItem2 (e)</a> 
     <ul> 
     <li><a>innerMenuItem1</a></li> 
     <li><a>innerMenuItem1</a></li> 
     <li><a>innerMenuItem2</a></li> 
     <li><a>innerMenuItem3</a></li> 
     <li><a>innerMenuItem4</a></li> 
     </ul> 
    </li> 
    </ul> 
</li> 
</ul> 

CSS

li ul { 
    display:none; 
} 

li:hover > ul, 
li.active > ul { 
    display:block; 
} 

JS

var keys = []; 

$(document).ready(function() { 
    $('[data-key]').each(function() { 
     keys.push({ 
      key: $(this).attr('data-key'), 
      elem: $(this) 
     }); 
    }); 
}); 

$(window).keydown(function(e) { 
    for (var i = 0; i < keys.length; i++) { 
     if (e.keyCode == keys[i].key) { 
      keys[i].elem.toggleClass('active'); 
      return; 
     } 
    } 
});