Keyboard accessible jquery

Keyboard accessible jquery

Hello,
 
I have a drop down menu that needs to be keyboard friendly.
 
At the moment I use 2 events:
 
  1. FocusIn
  2. MouseDown
 
If a user tabs through a document and tabs onto the menu it drops down.
If a user clicks on the menu it drops down.
 
The problem is that if I click on the menu, it also fires the focus event.
If I remove the focus event from the code everything works fine except for keyboard navigation.
 
How do I prevent a focus event from firing after a click event?
 
Heres an example:
 
 
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
     jQuery(document).ready(function() {






  2.   var toolbox = $("#toolBox");
      var toolBoxTrigger = $("#toolBox .toolBoxTrigger");
      var toolBoxAccordion = $("#toolBoxAccordion");

  3.   toolBoxAccordion.hide();
  4.   toolBoxTrigger.mousedown(
       function() {
  5.     if (toolbox.hasClass('open')) {
         toolbox.removeClass('open');
         toolBoxAccordion.stop(true, true).slideUp('normal');
        } else {
         toolbox.addClass('open');
         toolBoxAccordion.stop(true, true).slideDown('normal');
        }
       }
      ).focusin(







  6.    function() {
        toolbox.addClass('open');
        toolBoxAccordion.slideDown('normal');
      });
     });
    </script>




  7. </head>
    <body>
  8. <div id="toolBox" class="toolBox">
     <a href="#" class="toolBoxTrigger"><span>Tools</span></a>
     <ul id="toolBoxAccordion" class="toolBoxAccordion">
      <li>
       <a href="">Test</a>
       <a href="">Test</a>
       <a href="">Test</a>
       <a href="">Test</a>
       <a href="">Test</a> 
      </li>
     </ul>
    </div>
    </body>
    </html>












 
 
Many thanks for your help.
 
Kindest regards
 
Chris