Question

您可以在此处查看示例代码Sample code

目标：

顶级菜单悬停时，必须打开顶级菜单和子菜单
子菜单悬停时，顶层菜单和子菜单必须保持打开状态
当鼠标输出顶部菜单和子菜单菜单必须关闭时

我多次尝试并寻找解决方案，但无法实现。

此外，我无法将子菜单放在元素下。因为当缩小（枯萎）子菜单相对改变其位置时。它与我不兼容。

                <div class="menu-item"><a href="index.html"><i class="halflings white cog"></i> <span>Link One</span></a>
                    <div style="height:0;position:absolute;">
                    <div class="sub-menu" data-hover='false'>
                        <div>Sub Link</div>
                        <div>Sub Link</div>
                        <div>Sub Link</div>
                        <div>Sub Link</div>
                    </div>  
                    </div>
                </div>

Answer 1

您正在使用关闭子菜单的代码：

 $(this).parent().find('.sub-menu').css({display: "none"})
 .stop(true, false).animate({width:'0',height:'0',opacity:1},'fast');

在错误的地方。您可以在悬停为假之后关闭它（就像在另一个悬停功能中一样）。然后，反转这个'if'逻辑：

if(!$(this).parent().find('.sub-menu').data('hover'))

为：

if($(this).parent().find('.sub-menu').data('hover'))

并且为了结束，只需在另一个'if'之后添加'if'：

if(!$(this).parent().find('.sub-menu').is(':visible')){
    $(this).stop(true, false).animate({width:'15px'},'fast');                    
}

这是小提琴：http://jsfiddle.net/a8yZb/52/

Answer 2

最后，我通过使用这些函数解决了这个问题：

setTimeout(); 
clearTimeout();

解决方案在这里：http://jsfiddle.net/a8yZb/55/

如何在jQuery悬停菜单中保持子菜单打开 - 请检查示例

2 个答案: