Click here to Skip to main content
14,608,021 members

Close a div menu after clicking outside it

Leandro Crisol asked:

Open original thread
I have the next HTML code:
// Container for link where users will click to open the second div

<div class="topbar-block topbar-profile-options">
   <a class="open-popup-on-click" data-popup-id="topbar-user-actions"></a>

// Container-popup

<div id="topbar-user-actions" class="hidden popup"></div>

Click here to see full code (Github project).

And the jQuery code (it's a generalized code, to work with all links with class open-popup-on-click):
$('.open-popup-on-click').unbind('click').click(function() {
    $('#' + $(this).data('popup-id')).toggleClass('hidden');
    return false;

Click here to see full code (Github project).

Now I want to generalize this jQuery code, to also close the menus when clicking outside the popup.

I have been looking for an answer two days, but I can't get a jQuery code to work as I want (open/close on normal way, and hide when clicking outside popup).

Please, could someone help me? The most important for me is to understand your code, not just getting an answer.

Thanks in advance.
Tags: jQuery


When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the The Code Project Open License (CPOL).

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100