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

【问题标题】：How can I keep my sub-menu open in jQuery hover menu - please check sample如何让我的子菜单在 jQuery 悬停菜单中保持打开状态 - 请查看示例
【发布时间】：2014-04-06 06:51:27
【问题描述】：

您可以从这里查看示例代码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>

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

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

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

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

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/

【讨论】：

但是当子菜单可见时，顶部菜单必须保持打开状态，这就是问题所在。
@user3379494 我已经编辑了小提琴，只是更改了关闭代码上的 if 逻辑。
但是这次悬停时顶部菜单没有关闭（子菜单外），存在悬停问题，我无法解决。
好的@user3379494，我再次编辑了整个答案（包括小提琴）。
有一个问题，当顶部菜单有子菜单时，当悬停在其上时，悬停到向下或向上时，顶部菜单不会消失，只有在悬停子菜单后才会消失。也许我们必须使用 setTimeout 函数。我试过但它也不能正常工作，也许我在某个地方做错了。感谢您的努力@wistcc

【解决方案2】：

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

setTimeout(); 
clearTimeout();

解决办法在这里：http://jsfiddle.net/a8yZb/55/

【讨论】：