HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

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

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
handlingcloseclickthemenuseventstargetopendependingand

Problem

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

Solution

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);
    }   
}

Code Snippets

$(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);
    }   
}

Context

StackExchange Code Review Q#2400, answer score: 2

Revisions (0)

No revisions yet.