在传递不同的菜单项时防止打开新的下拉菜单答案

【问题标题】：Prevent new dropdown from opening when passing over different menu item在传递不同的菜单项时防止打开新的下拉菜单
【发布时间】：2016-05-06 09:47:33
【问题描述】：

我正在这个网站上建立一个大型菜单。要打开超级菜单，请将鼠标悬停在您想要的项目上

<nav id="primaryMenu">
    <ul>
        <li class="menu-learn"><a href="#">Item 1</a></li>
        <li class="menu-teach"><a href="#">Item 2</a></li>
        <li class="menu-draw"><a href="#">Item 3</a></li>
        <li class="menu-build"><a href="#">Item 4</a></li>
    <ul>
</nav>
<div class="mega-menu">
    <div class="cat-learn">
        <h1>Content</h1>
    </div>
    <div class="cat-teach">
        <h1>Content</h1>
    </div>
    <div class="cat-draw">
        <h1>Content</h1>
    </div>
    <div class="cat-build">
    </div>
</div>

使用 JQuery，我制作了这个函数，将一个活动类添加到大型菜单内的相应<div>。

    function menuHover(item, Megadrop){
        $(item).hover(
            function(){
                setTimeout( function(){$(Megadrop).addClass('active')}, 500);   
            },
            function(){
                setTimeout( function(){$(Megadrop).removeClass('active')}, 200);
            }
        );
        $(Megadrop).hover(

            function(){$(this).addClass('active') },
            function(){$(this).removeClass('active')}
        );
    }
    menuHover('.menu-learn','.mega-menu .learn');
    menuHover('.menu-teach','.mega-menu .cat-teach');
    menuHover('.menu-draw','.mega-menu .cat-draw');
    menuHover('.menu-play','.mega-menu .cat-play');

巨型菜单出现在导航下方，全屏显示。问题是，如果您将鼠标移到另一个列表导航项上，同时转到超级菜单上的某个位置，您将沿途激活该超级菜单。当“跳过”原始导航项和巨型菜单之间的另一个导航项时，如何防止打开新的巨型菜单？

我应该放弃 hover 以使用 javascript 进行 onMouse 事件吗？

【问题讨论】：

这是悬停/鼠标悬停的预期行为。您必须使用点击事件来保持大型菜单打开，而不是使用悬停。
我应该改变 JQuery 的悬停来处理 OnmouseOver 和 OnmouseOut 事件吗？
不..你会遇到同样的问题。您的代码无法区分用户的意图。如果他们真的想选择另一个顶级项目怎么办？它无法告诉用户打算去哪里......它只能对他们在哪里作出反应......看到了吗？
听起来你想要的是在打开下一个项目之前添加一个延迟。因此，如果用户在 x 毫秒后停在特定菜单项上，则菜单将打开。

标签： javascript jquery css

【解决方案1】：

这是一个众所周知的案例。有一个人解决了这个问题，模仿亚马逊的超级菜单。

真的值得一看： https://github.com/kamens/jQuery-menu-aim

祝你好运！

【讨论】：