Question

我有一些简单的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>

有什么想法吗？

Answer 1

这是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();
});

为什么jQuery会触发两次触发器？

1 个答案: