patternjavascriptMinor
Handling click events to open and close menus depending on the click target
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:
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
```
$().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
- 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.
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.