jQuery tab and shift+tab to show navigation
<p>I'm trying to show sub navigation when tabbing on parent items and then hide when tabbing or shift+tabbing out of sub-menu.</p>

<p>Here's my JS. I have the first and last statements working, but can't get the last. What am I doing wrong?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Show Child Navigation
    jQuery('.has-child, .currenthas-child').keydown( function(e) {
        if (e.keyCode == 9 &amp;&amp; !e.shiftKey) {
           jQuery(this).children().show();
        }
    });
    
    
    //SHIFT + TAB BUTTON
    jQuery('.submenu li:first-child').keydown( function(e) {
        if (e.keyCode == 9 &amp;&amp; e.shiftKey) {
           jQuery(this).parent().hide();
           console.log("tab first");
        }
    });
    
    //TAB BUTTON
    jQuery('.submenu li:last-child').keydown( function(e) {
        if (e.keyCode == 9 &amp;&amp; !e.shiftKey) {
           jQuery(this).parent().hide();
          console.log("tab last");
        }
    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;nav role="navigation"&gt;
        &lt;button class="menu-toggle" aria-label="Navigation menu"&gt;&lt;/button&gt;
        &lt;ul class="menu"&gt;
            &lt;li class="has-child"&gt;
                &lt;a href="#"&gt;Menu Item&lt;/a&gt;
                &lt;ul class="submenu" style="display: block;"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="has-child"&gt;
                &lt;a href="#"&gt;Menu Item&lt;/a&gt;
                &lt;ul class="submenu" style="display: none;"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="has-child"&gt;
                &lt;a href="#"&gt;Menu Item&lt;/a&gt;
                &lt;ul class="submenu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="has-child"&gt;
                &lt;a href="#"&gt;Menu Item&lt;/a&gt;
                &lt;ul class="submenu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="has-child"&gt;
                &lt;a href="#"&gt;Menu Item&lt;/a&gt;
                &lt;ul class="submenu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;</code></pre>
</div>
</div>
</p>