Prevent focus event when click event fires

Prevent focus event when click event fires

Hello,
 
I have an options menu I've put together that I now need to add keyboard support.
 
I was thinking that I need a focus event so that when a user tabs to the options menu the focus event triggers and causes the menyu to open. They can then use the arrow keys on the keyboard to navigate up and down the menu.
 
I have two functions: open() and close() when a user clicks, the event checks to see if the menu is open and if it isn't, it opens it. The problem is that the focus event does the same thing when someone clicks as if someone has tabbed on to it.
 
Here is the code thus far:
 

  1. $(document).ready(

    function() {

    if (jQuery('.contextMenuContainerNCF2').length > 0) {

    var menuLabel = $('.contextMenuContainerNCF2 .contextMenuLabelNCF2');

    menuLabel.click(

    function() {

    if ($(this).next().is(":visible")) {

    close($(

    this));

    }

    else {

    open($(

    this));

    }

    return false;

    });

    menuLabel.focus(

    function() {

    if (!$(this).next().is(":visible")) {

    close($(

    this));

    }

    else {

    open($(

    this));

    }

    return false;

    });

    function open(clicked) {

    jQuery(document).click(

    function() {

    clicked.parent().removeClass(

    'contextMenuContainerNCF2Open').addClass('contextMenuContainerNCF2');

    });

    clicked.parent().click(

    function(e) {

    e.stopPropagation();

    });

    clicked.parent().removeClass(

    'contextMenuContainerNCF2').addClass('contextMenuContainerNCF2Open');

    }

    function close(clicked) {

    clicked.parent().removeClass(

    'contextMenuContainerNCF2Open').addClass('contextMenuContainerNCF2');

    }

    }

    });

    <div style="padding: 50px; margin-top: 200px;">

    <div class="contextMenuContainerNCF2">

    <%

    ---this has changed to an anchor so that it can be focused --%>

    <a href="" class="contextMenuLabelNCF2">

    <span><span><span>Options</span></span></span>

    </a>

    <div class="contextMenuPanelNCF2">

    <ul class="list">

    <li>Test</li>

    <li>test2</li>

    </ul>

    </div>

    </div>

    </div>

My apologies if this is something simple, but I'm not been working with jQuery for very long.
 
Kindest regards
 
Chris