jQuery選項卡和shift +選項卡以顯示導航

Question

我試圖顯示子導航時，在父項上標籤，然後隱藏時Tab或Shift + Tab鍵退出子菜單。

這是我的JS。我有第一個和最後一個聲明工作，但不能得到最後一個。我究竟做錯了什麼？

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

像這樣的事情？

[_{具有子子菜單和顯示當前時隱藏兄弟。就毫不掩飾的兄弟姐妹，只是.end()後的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; }

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