Need to hide element only if it's already showing

Question

I'm working on a website and I have created a dropdown menu. The menu opens when you click an "About Me" link, which reveals a few more links (biography, interests, etc.). I'm able to toggle the menu on and off by clicking on the "About Me" link. Here's my question: I want to write some code such that the dropdown menu can only be opened by clicking the "About Me" link, but can be closed by clicking the link or ANYWHERE ELSE on the document (it's kind of annoying to have to click the "About Me" link again in order to close the dropdown). Here's the jQuery code I have so far:

$(".about-me").click(function() {
    $(".dropdown-menu").toggle();
});

I tried adding a

$(document).click(function() {
    $(".dropdown-menu").hide();
});

but since the "About Me" link is a part of the document as well, this makes it so that clicking the link will never open the dropdown menu in the first place. Any help is much appreciated!

Clicking anywhere but the About Me link: `$(':not(.aboutMe)').click(function() { });` Use with precaution. — emerson.marini, Aug 19 '14 at 15:10
Possible duplicate: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — vitorsdcs, Aug 19 '14 at 15:12

score 0 · Answer 1 · answered Aug 19 '14 at 15:11

0

Stop the click event on the link from propagating up the DOM and triggering the click on the document:

$(".about-me").click(function(e) {
    e.stopPropagation();
    $(".dropdown-menu").toggle();
});

answered Aug 19 '14 at 15:11

j08691

204,283
31
260
272

Need to hide element only if it's already showing

1 Answers1