右键单击时，jQuery悬停菜单消失 [英] jQuery Hover Menu disappears when right click

问题描述

我有一个菜单，在悬停时打开。但是右键单击时，菜单在打开时会消失。但我不明白为什么。我需要在contextmenu /右击的同时打开悬停菜单。

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> 
 < div id =main_menu_inner> 
 < div class =clear_right>< / div> 
< ul> 
< li> 
< a href =>连结< / a> 
< / li> 
< li> 
< a href =>连结< / a> 
< / li> 
< li> 
< a href =>连结< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
  

解决方案

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

  var contextMenuOpened = false; 
 $ b $（document）.on（'mouseover'，'#main_menu'，function（）{
 $（'＃main_menu_inner'）。show（）; 
 contextMenuOpened =假; 
}）; （'contextmenu'，function（e））中的
 $ b $（document）.on（'mouseleave'，'#main_menu'，function（）{
 $（＃main_menu {
 contextMenuOpened = true; 
}）; 
 if（！contextMenuOpened）{
 $（'＃main_menu_inner'）。hide（）; 
} 
}）; 
  

现场示例

I have a Menu that opens when hovering. But on right click the menu disappears when the contextmenu opens. But I can't figure out why. I need the hover menu open at the same time with contextmenu/right click.

The jQuery Code (Version 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();

    });

The 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>

解决方案

You can "hack" the mouseover/mouseleave behaviour by adding a boolean to check if the context menu is opened into the mouseleave event handler. That's not a really good practice, but it makes your request possible:

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悬停菜单消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！