Click outside menu to close is not working

Question

I have been reading some questions at stackoverflow, about how to closing a menu when clicking outside by using jQuery without plugins.

I tried to use event.stopPropagation() but is not working. Could you tell me how to use it in the next code, and explain why is working in yours?

This is the original code in my webpage, and I want it to do the same function, plus closing it when clicking outside (full code here):

$('.open-popup-on-click').unbind('click').click(function() {
    $('#' + $(this).data('popup-id')).toggleClass('hidden');
    return false;
});

HTML code (the first div is just a link where users click, and when they do, second div is open as a popup):

<div class="topbar-block topbar-profile-options">
  <a class="open-popup-on-click"
    data-popup-id="topbar-user-actions"
    href="/cuenta"><%=avatar_img(@user, :very_small)%></a>
</div>

<div id="topbar-user-actions" class="hidden popup">
  <div style="float: left"><a href="/miembros/<%=@user.login%>"><%=avatar_img(@user, :normal)%></a></div>
  <ul style="display: inline-block">
    <li><a href="/cuenta">mi cuenta</a></li>
    <li><a href="/cuenta/clanes">mis clanes</a></li>
    <li><a href="/cuenta/competiciones">mis competiciones</a></li>
    <li style="padding-top: 20px; padding-bottom: 20px;"><a href="/miembros/<%=@user.login%>">mi perfil público</a></li>
    <li><a class="confirm-click nav" href="/cuenta/logout">cerrar sesión</a></li>
  </ul>
</div>

open-popup-on-click is a class used with all links, from where I want to open a popup. In this case, the popup is the second div, with ID topbar-user-actions

If you still don't understand me, please look this image:

http://i281.photobucket.com/albums/kk205/LEANDRO351/Gamersmafia/exampleMenu.png

Thanks in advance.

Try to make use of `event.path`. There is an answer over here [http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element/43405204#43405204](http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element/43405204#43405204) — Dan Philip Bejoy, Apr 14 '17 at 04:35

score 0 · Answer 1 · answered Feb 26 '13 at 20:23

0

there are a few things, but this would work

           $('body').click(function(event){
                 $('.open-popup-on-click').not(':hidden').toggle();
             });

My impression is that you want to close that anchor when a user clicks anywhere else on the page.

answered Feb 26 '13 at 20:23

james emanon

11,185
11
56
97

This code is not working, but yes, I want to close it when a user clicks anywhere else on the page. I have added more information to the original question, and also an image. Please, look it: http://i281.photobucket.com/albums/kk205/LEANDRO351/Gamersmafia/exampleMenu.png – Draco Feb 26 '13 at 20:52

score 0 · Answer 2 · answered Feb 26 '13 at 21:04

0

Try this.

$(document).on('click',function(event){
          $('#topbar-user-actions').hide();
       });

answered Feb 26 '13 at 21:04

SRy

2,901
8
36
57

If you mean replace the original code with this code, is not working :/ – Draco Feb 26 '13 at 21:59
That's right, `<%=avatar_img(@user, :very_small)%>` is always visible in your example, but if I click **anywhere** the menu is closed. I want the menu to be closed **only** if I click again on the link/image where I clicked to open it, or if I click **outside** the menu, not inside. If this is not working properly due to Fiddle, but should work in my webpage, I don't know how to combine your code, with the original jQuery code of the web page, to work them together. Note I'm starting with jQuery, I didn't make this website, the one who did it didn´t have time to keep working on it. Thanks ;) – Draco Feb 27 '13 at 00:09

Click outside menu to close is not working

2 Answers2