scheda jQuery e MAIUSC + scheda per mostrare la navigazione

Sto provando a mostrare la navigazione secondaria quando tocchi gli elementi principali e poi li nascondi quando tocchi o togli + tabulazioni dal sottomenu.

Ecco il mio JS. Ho la prima e l’ultima affermazione funzionanti, ma non posso ottenere l’ultima. Che cosa sto facendo di sbagliato?

// Show Child Navigation jQuery('.has-child, .currenthas-child').keydown( function(e) { if (e.keyCode == 9 && !e.shiftKey) { jQuery(this).children().show(); } }); //SHIFT + TAB BUTTON jQuery('.submenu li:first-child').keydown( function(e) { if (e.keyCode == 9 && e.shiftKey) { jQuery(this).parent().hide(); console.log("tab first"); } }); //TAB BUTTON jQuery('.submenu li:last-child').keydown( function(e) { if (e.keyCode == 9 && !e.shiftKey) { jQuery(this).parent().hide(); console.log("tab last"); } }); 
   

Qualcosa come questo?

[ Ha sottomenu secondari e nasconde i fratelli quando mostra corrente. Per non hide i fratelli, basta rimuovere il codice dopo .end() nell’evento li.keydown ]

 /* Here i simply assign each event to a variable for easy implimintation. */ var myEvents = { click: function(e) { jQuery(this).children('ul').show().end().siblings('li').find('ul').hide(); }, keydown: function(e) { e.stopPropagation(); if (e.keyCode == 9) { if (!e.shiftKey && jQuery('nav li').index(jQuery(this)) == (jQuery('nav li').length-1)) jQuery('nav li:first').focus(); else if (e.shiftKey && jQuery('nav li').index(jQuery(this)) === 0) jQuery('nav ul:first > li:last').focus().blur(); } }, keyup: function(e) { e.stopPropagation(); if (e.keyCode == 9) { if (myEvents.cancelKeyup) myEvents.cancelKeyup = false; else myEvents.click.apply(this, arguments); } } } jQuery(document) .on('click', 'li', myEvents.click) .on('keydown', 'li', myEvents.keydown) .on('keyup', 'li', myEvents.keyup) // this is needed to keep tabbing focus correct jQuery('nav li').each(function(i) { this.tabIndex = i; }); /* Below is simply for making menus with sub menues more noticable */ jQuery('li').each(function(i) { if (jQuery(this).children('ul').length) jQuery(this).addClass('highlight'); }); 
 li ul { display: none; } .highlight > a { background: yellow; }