jQuery target pseudo element

CSS / Jquery / Snippets / Tutorials / Web development

Whilst working on a project for a client, I came across a bit of a challenge. They wanted to show sub menu items using jQuery .slideDown() function on click of the parent list element. This is pretty straight forward but, the list element also acted as live links. The problem is you can’t do both, you can’t have the list element act as a trigger on click to show the sub menu and have it as a live link.

My first thought was to use a ::pseudo element to target the dropdown and leave the list element to link to the a record. ¬†However ,this wont work because it’s not technically part of the DOM and therefore is inaccessible by any JavaScript.

A work around is to use the ::pseudo element to visually show where the clickable area will be, then use the users mouse coordinates to target and restrict the clickable area to the the pseudo element.

$('.list li').click(function(e) {
if (e.clientX > $(this).offset().left + 150 &&
e.clientY < $(this).offset().top + 50) {
alert("clicked in red area");
}
});

See the code in practice below