javascript - 如何让我的子菜单在 jQuery 悬停菜单中保持打开状态 - 请检查示例

Question

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

目标:

1. 当顶部菜单悬停时，顶部菜单和子菜单必须打开
2. 当子菜单悬停时，顶部菜单和子菜单必须保持打开状态
3. 当鼠标移开时，顶部菜单和子菜单都必须关闭

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

我也不能将子菜单放在元素下。因为当一个收缩(变得枯萎)时，子菜单相对地改变了它的位置。它不适合我。

                <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');

放错地方了。您可以在悬停为 false 后立即关闭它(就像在另一个悬停功能中一样)。然后，反转这个“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');                    
}

这是 fiddle :http://jsfiddle.net/a8yZb/52/