Question

我一直在阅读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/<%=@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是一个用于所有链接的类，我想打开一个弹出窗口。在这种情况下，弹出窗口是第二个div，ID为topbar-user-actions

如果您仍然不理解我，请查看此图片：

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

提前致谢。

Answer 1

有一些事情，但这会起作用

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

我的印象是，当用户点击页面上的任何其他位置时，您希望关闭该锚点。

Answer 2

试试这个。

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

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

2 个答案: