0

悬停 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 代码。我使用的是电子商务平台，这是我可以创建子类别的唯一方法）

4

4 回答 4

2

如果我理解正确；只需删除第二个功能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);
    });
});
于 2012-04-19T17:52:30.373 回答
1

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

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

编辑2：

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

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

于 2012-04-19T18:10:12.367 回答
0

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

$('.has-children, #submenu-ID').hover(function(){
于 2012-04-19T17:51:15.960 回答
0 
    $('.has-children').on('hover', function(){
        var the_sub_nav = '#' + this.id + '-sub-nav';
        $(the_sub_nav).stop().animate({height:'200px'},1000);
    });
于 2012-04-19T17:57:11.210 回答