Javascript 为什么jQuery要两次触发我的触发器？

我有一些简单的jQuery来隐藏和显示菜单。当你在菜单外点击时，它应该会隐藏它。但是如果我点击菜单的触发目标（例如链接），它会隐藏然后重新打开菜单，而不是仅仅隐藏它

var notifyMenu = $(".notifyMenu .menu");

if (!notifyMenu.is(e.target) // if the target of the click isn't the container...
&& notifyMenu.has(e.target).length === 0) // ... nor a descendant of the container
{
    notifyMenu.hide();
    screenOverlay.hide();

}


$('.notifyMenu > a').click(function(event) {
    var menuID = $(this).parent().prop("id");
    var notifyMenu = $('#' + menuID + ' .menu');

    if (notifyMenu.is(':visible')) {
        screenOverlay.fadeOut();
        notifyMenu.fadeOut('fast');
    } else {
        // Show screenoverlay if on mobile
        if (ftrNav.is(':visible')) {
            screenOverlay.fadeIn('fast');
        }
        notifyMenu.fadeIn('fast');
    }

    event.preventDefault();

});

HTML如下所示：

<li id="userLI" class="notifyMenu">
            <a href="/player/profile">
                &nbsp;
                <div class="profilePhoto">JM</div>
                <span class="fa fa-angle-down"></span> <div class="numVal"></div>
            </a>

            <div class="menu playerMenu" style="display: block;">
                <div class="upArrow"></div>
                <ul>
                    <li class="playerDetails">
                        <div class="name">Jon Marus</div>
                        <div class="access">
                            MANAGER (Spare)                     </div>
                    </li>
                    <li><a href="/player/profile/"><div class="icon fa fa-user-circle-o" title="Player Profile"></div> Profile</a></li>
                    <li><a href="/player/notifications"><div class="icon fa fa-bell"></div> Notifications</a></li>
                    <li><a href="/player/password"><div class="icon fa fa-lock"></div> Change Password</a></li>
                    <li><a href="/logout"><div class="icon fa fa-sign-out" title="Logout"></div> Logout</a></li>
                </ul>
            </div>
        </li>

乔恩·马鲁斯
经理（备用）

---

有什么想法吗？

这就是DOM事件的工作方式。每个事件都将传播到文档对象

因此，您需要在单击菜单时将

event.stopPropagation（）

添加到菜单中。单击菜单时，将不会调用文档的onclick事件处理程序

例如：

$(document).on('click', function() {
  //Hide the menu etc...
  $('.notifyMenu .menu').hide();
}

$('.notifyMenu .menu').on('click', function(e) {
   //Show or toggle code goes here
   $('.notifyMenu .menu').show();
   e.stopPropagation();
});

---

我应该说我试过了。我将onclick更改为：

code

if（！notifyMenu.is（e.target）//如果单击的目标不是容器…&¬ifyMenu.has（e.target）。length==0）//。。。也不是容器的后代{notifyMenu.hide（）；screenOverlay.hide（）；}

code

哇，我的评论很糟糕。我添加了一个例子。这是一个经典的通用下拉方法这是一个很好的例子。虽然这在我的情况下似乎不起作用。其他原因导致（document）.on（'click'）触发两次。您能用JSFIDLE或类似工具复制此问题吗？然后我们可以一起工作