Question

我有一个在悬停时打开的菜单。但是在右键单击时，菜单会在上下文菜单打开时消失。但我无法弄清楚为什么。我需要在上下文菜单/右键单击的同时打开悬停菜单。

jQuery代码（版本jquery-1.11.2.min.js）：

    jQuery(document).on('mouseover','#main_menu',function() {

        jQuery('#main_menu_inner').show();

    });
    jQuery(document).on('mouseleave','#main_menu',function() {

        jQuery('#main_menu_inner').hide();

    });

HTML：

<div id="main_menu">
    <img id="menu_button" src="/skin/images/all/structure/menu_button.png" alt="Men&uuml;" />
    <div id="main_menu_inner">
        <img id="menu_arrow" src="/skin/images/all/structure/main_menu_arrow_down.png" alt="Arrow" />
        <div class="clear_right"></div>
        <ul>
            <li>
                <a href="">Link</a>
            </li>
            <li>
                <a href="">Link</a>
            </li>
            <li>
                <a href="">Link</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

您可以通过添加布尔值来“破解”mouseover / mouseleave行为，以检查上下文菜单是否在mouseleave事件处理程序中打开。这不是一个很好的做法，但它可以使您的请求成为可能：

var contextMenuOpened = false;

$(document).on('mouseover', '#main_menu', function () {
    $('#main_menu_inner').show();
    contextMenuOpened = false;
});

$(document).on('mouseleave', '#main_menu', function () {
    $("#main_menu").on('contextmenu', function (e) {
        contextMenuOpened = true;
    });
    if (!contextMenuOpened) {
        $('#main_menu_inner').hide();
    }
});

Live exemple

右键单击时，jQuery Hover Menu消失

1 个答案: