title: How to set focus on first focusable element jQuery?
body: <p>I've been working on a dropdown/popup menu, and I have it working great, with one exception; when you click on the link (or hit the enter key) to open the menu, focus is supposed to be set to the next element that can receive focus. So in this example, clicking on the "Menu 1" link, should expand the menu, and set focus on "test 1". But for some reason, it jumps to the last focusable element (test 3) instead:</p>
  
  <pre><code>&lt;ul class="axxs-menu"&gt;
    &lt;li&gt;&lt;a class="trigger"&gt;Menu 1&lt;/a&gt;
      &lt;ul class="content"&gt;
        &lt;li&gt;&lt;a href="#1"&gt;test 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#2"&gt;test 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#3"&gt;test 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is the relevant js:</p>
  
  <pre><code>jQuery.extend(jQuery.expr[':'], {
      focusable: function(el, index, selector){
      return $(el).is('a, button, :input, [tabindex]');
  }
  });
  
  function openPopmenu(element) { 
  $(element).removeClass('trigger-inactive').addClass('trigger-active').attr("aria-expanded", "true").attr("aria-selected", "true");
   $(element).next('.collapsed').removeClass('collapsed').addClass('expanded').show().attr("aria-hidden", "false");
  $(element).next().find(':focusable').focus();
  }
  </code></pre>
  
  <p>And here is a code pen:</p>
  
  <p><a href="http://codepen.io/tactics/pen/EZbGBY" rel="noreferrer">http://codepen.io/tactics/pen/EZbGBY</a></p>
  
  <p>Any help is much appreciated.</p>