点击外部菜单关闭不起作用

我一直在阅读some questions at stackoverflow，关于如何通过使用不带插件的jQuery在外部点击时关闭菜单。点击外部菜单关闭不起作用

我试过使用event.stopPropagation()，但没有工作。你能告诉我如何在下一个代码中使用它，并且解释了为什么你的工作是？

这是在我的网页的原代码，并我希望它做同样的功能，再加上单击当外界（full code here）关闭它：

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

HTML代码（第一个div只是一个链接，用户点击，当他们这样做，第二个div是开放作为一个弹出）：

<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/<%[email protected]%>"><%=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/<%[email protected]%>">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是所有环节的一类，从那里我想打开一个弹出。在这种情况下，弹出的是第二个div，ID为topbar-user-actions

如果您还有不明白的我，请看看这个图片：

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

在此先感谢。

来源

2013-02-26 Draco

尝试使用'event.path'。这里有一个答案[http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element/43405204#43405204](http://stackoverflow.com/问题/ 152975 /如何检测点击外部元素/ 43405204＃43405204） – 2017-04-14 04:35:42

有几件事情，但是这会工作

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

我的印象是，你要关闭锚，当用户点击其他地方在页面上。

来源

2013-02-26 20:23:27

此代码无法正常工作，但是，当用户单击页面上的任何其他位置时，我想关闭它。我在原始问题中添加了更多信息，并且还添加了图像。请看：http://i281.photobucket.com/albums/kk205/LEANDRO351/Gamersmafia/exampleMenu.png – Draco 2013-02-26 20:52:12

试试这个。

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

来源

2013-02-26 21:04:05 SRy

如果你的意思是用这段代码替换原来的代码，不起作用：/ – Draco 2013-02-26 21:59:00

根据你的图片'exampleMenu这个工程http://jsfiddle.net/sjhnT/ – SRy 2013-02-26 22:35:21

没错，'<％= avatar_img（@user，：very_small）％>'在你的例子中总是可见的，但是如果我点击**任意位置**菜单已关闭。如果我再次单击链接/图像点击打开它，或者如果单击菜单外部的**，而不是内部，我希望菜单仅被关闭**。如果由于Fiddle而无法正常工作，但应该在我的网页中工作，我不知道如何将您的代码与网页的原始jQuery代码结合在一起使用。注意我从jQuery开始，我没有制作这个网站，做这个的人没有时间继续工作。谢谢 ;） – Draco 2013-02-27 00:09:29

点击外部菜单关闭不起作用

回答

相关问题