title: Making a drop-down menu keyboard and mouse browsable
body: <p>I am working on a project for a client that requires a custom drop-down menu, accessible by clicking to open it, or using the keyboard to tab across to it.</p>
  
  <p>Currently, my solution works almost perfectly, but there is one problem: the first time you click the drop-down menu, it flashes open and then closes again. I'm sure there's a simple glitch with my JavaScript and jQuery here!</p>
  
  <p>The required functionality is this:</p>
  
  <ol>
  <li>The user must be able to click to open a drop-down menu. (DONE, but with problems)</li>
  <li>The user must be able to click another menu, and have  the previous one close and the new one open. (DONE)</li>
  <li>The user must be able to click anywhere else on the page and have the open menu close.  (DONE)</li>
  <li>The user must be able to tab along the menu bar, highlighting each link, and opening the menu when it is tabbed to.  (DONE)</li>
  <li>The tabbing must then tab down the entire menu, before leaving onto the next menu or link, closing the previous menu.  (DONE)</li>
  </ol>
  
  <p>As I say here, I have it almost entirely working, but the keyboard focus recognition also detects mouse focusing, meaning that when I click, it triggers a keyboard focus instantly after the mouse one, closing it again.</p>
  
  <p>Or so I think. Please help!</p>
  
  <p><strong>JavaScript Code</strong></p>
  
  <pre><code>$(document).ready(function() {
  function toggle(select) {
      closeAll(select);
      if(select.hasClass("expanded")) {
          select.removeClass("expanded");
      } else {
          select.addClass("expanded");
      }
  }
  function closeAll(select) {
      var close = $(document).find("#navigation li.select.expanded");
      if(select != null) {
          close = close.not(select);
      }
      close.removeClass("expanded")
  }
  
  $("#navigation &gt; ul &gt; li.select &gt; a").click(function(event) {
      event.preventDefault();
      toggle($(this).parent());
  });
  $(document).mouseup(function(event) {
      var select = $("#navigation &gt; ul &gt; li.select.expanded");
      if(!select.is(event.target) &amp;&amp; select.has(event.target).length === 0) {
          closeAll();
      }
  });
  $(document).on("focus", "#navigation &gt; ul &gt; li &gt; a", function () {
      closeAll();
      if($(this).parent().hasClass("select")) {
          toggle($(this).parent());
      }
  });
  });
  </code></pre>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>    &lt;div id="navigation"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="select"&gt;
                  &lt;a href="#"&gt;&lt;i class="fa fa-users"&gt;&lt;/i&gt; Find a Society&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Scotland&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;North West&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;North East&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Midlands&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Eastern Counties&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Central Counties&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Wales&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;South West Counties&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Southern Counties&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;South East Counties&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Greater London&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>The current design</strong></p>
  
  <p><img src="https://i.stack.imgur.com/iLKaS.png" alt="The current user-interface design"></p>