jQuery選項卡和Shift + Tab顯示導航

Question

我試着在父項上按Tab鍵顯示子導航，然后在按Tab鍵或從子菜單移出+ Tab鍵時隱藏它們。

這是我的JS。 我的第一個和最后一個語句都有效，但無法獲取最后一個。 我究竟做錯了什么？

 // 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"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav role="navigation"> <button class="menu-toggle" aria-label="Navigation menu"></button> <ul class="menu"> <li class="has-child"> <a href="#">Menu Item</a> <ul class="submenu" style="display: block;"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> <li class="has-child"> <a href="#">Menu Item</a> <ul class="submenu" style="display: none;"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> <li class="has-child"> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> <li class="has-child"> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> <li class="has-child"> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> </ul> </li> </ul> </nav> 

Answer 1

像這樣嗎

[ _{具有子子菜單，在顯示當前信息時隱藏同級。 li.keydown隱藏兄弟姐妹，只需在li.keydown事件中的.end()之后刪除代碼} ]

 /* 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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav role="navigation"> <button class="menu-toggle" aria-label="Navigation menu">Button</button> <ul class="menu"> <li class="has-child"> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> </ul> </li> <li class="has-child"> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> <li> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> <li class="has-child"> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> <li class="has-child"> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> <li class="has-child"> <a href="#">Menu Item</a> <ul class="submenu"> <li><a href="#">Menu Item</a></li> </ul> </li> </ul> </nav>