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, #submenu-ID').hover(function(){

Answer 4

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

Jquery - 悬停时的动画div

4 个答案: