Handling click events to open and close menus depending on the click target

Question

I'm building a navigation that has a breadcrumb with drop down menus. I want the menus to open up when I click the open link, then there are many instances when the menu should close:

• The link is clicked a second time, with the intention of closing the menu
• When another menu is open, the first menu should close
• When a menu is open, and anywhere outside the menu is clicked
• When a menu item is clicked

I'm anticipating that I'll have many click events to handle, and many different types of menus, pop-ups and drop downs through the entire site, so I'm trying to handle that efficiently, thus the switch statement.

$().ready(function () {    
    //Click event mayhem!
    $('html').click(function (event) {
        event.stopPropagation();
        var target = $(event.target);
        switch (target.attr('class')) {
            case 'expandDropDown':
                handleBreadCrumbDropDownClick(target);
                break;
            case 'headlineTitle':
                event.preventDefault();
                handleAccordionItemClick(target);
                break;
            default:
                //Always close dropdown menus, unless they're specifically being opened
                toggleDropDown('.BC-DropDown-Open');
        }
    });
});

function handleBreadCrumbDropDownClick(target) {
    //Get the drop down list being targeted
    var dropDownList = '#' + target.attr('itemprop');
    //Offset of the expander link
    var offset = target.offset();
    if ($(dropDownList).hasClass('BC-DropDown-Open')) {
        //Dropdown is being closed with the expandDropDown link
        $(dropDownList)
                        .hide()
                        .toggleClass('BC-DropDown-Open');
    }
    else {
        //Dropdown is being opened with the expandDropDown link

        if ($('.BC-DropDown-Open').length > 0) {
            //Close existing drop down lists if any
            toggleDropDown('.BC-DropDown-Open');
        }
        //Open selected dropdown
        toggleDropDown(dropDownList, offset);
    }   
}

Answer 1

The switch statement isn't needed.

Just set a click function for each class.

$(document).ready(function ready () {    
    $('.expandDropDown').click( handleBreadCrumbDropDownClick );
    $('.headlineTitle').click( handleAccordionItemClick );
});

function handleBreadCrumbDropDownClick() {
    var target = $(this);
    var dropDownList = $('#' + target.attr('data-itemprop'));
    var offset = target.offset();
    if ( dropDownList.hasClass('BC-DropDown-Open') ) {
        dropDownList
          .hide()
          .toggleClass('BC-DropDown-Open');
    }  else {
        if ( $('.BC-DropDown-Open').length ) {
            toggleDropDown('.BC-DropDown-Open');
        }
        toggleDropDown(dropDownList, offset);
    }   
}