Jquery - 悬停时动画 div

Question

我在悬停一个 id 时将一个简单的动画应用到一个 div。 div 不是 id 的孩子。因此，当我的光标离开 id 时，div 会自行隐藏。 这是正确的，但我要求 div 保持可见，除非我的鼠标离开它。

您可能需要测试才能看到我的问题。链接如下。

这是我的 jQuery：

            $(function(){
                $('.has-children').hover(function(){
                    var the_handle = $(this).attr('id');
                    var the_sub_nav = '#' + the_handle + '-sub-nav';
                    $(the_sub_nav).stop().animate({height:'200px'},1000);
                },function(){
                    var the_handle = $(this).attr('id');
                    var the_sub_nav = '#' + the_handle + '-sub-nav';
                    $(the_sub_nav).stop().animate({height:'0px'},1000);
                });

           });

这里是问题的链接：

http://tinyurl.com/c9yunhu

（我应该提到我受限于那个 HTML 代码。我使用的是电子商务平台，这是我可以创建子类别的唯一方法）

Answer 1

如果我理解正确的话；只需删除hover() 的第二个功能，使 div 在鼠标移出时保持可见。完整代码：

$(function(){
    $('.has-children').hover(function(){
        var the_handle = $(this).attr('id');
        var the_sub_nav = '#' + the_handle + '-sub-nav';
        $(the_sub_nav).stop().animate({height:'200px'},1000);
    });
});

Answer 2

这里有一个简单的 JSFiddle http://jsfiddle.net/toroncino/uPDXX/1/

编辑：这里有一个简短的版本：http://jsfiddle.net/toroncino/uPDXX/3/

编辑 2：

现在看一下，是基于你当前的html...显然我永远不会使用这样的js。 =) 但也许它会帮助你...

http://jsfiddle.net/toroncino/uPDXX/5/

Answer 3

    $('.has-children').on('hover', function(){
        var the_sub_nav = '#' + this.id + '-sub-nav';
        $(the_sub_nav).stop().animate({height:'200px'},1000);
    });

Answer 4

将子菜单容器添加到悬停功能，这样它在悬停在菜单项或整个子菜单上时将保持打开状态。

$('.has-children, #submenu-ID').hover(function(){