javascript - 目标父李

Question

我已经在 stackoverflow 上搜索了解决方案，我的问题是新的(我认为)是因为我正在使用 HTML 布局。

问题 - 在我在我们网站上实现的类似亚马逊的菜单 ( related post ) 中，当鼠标进入其相关的子 li 时，我无法将鼠标悬停在 Parent li 上。

现在，如果我在父布局中使用子元素(我相信)，这可能很容易，但是我们拥有的 html 布局(必须使用)是不同的，其中父元素在一个 ul 中，而子元素在另一个 ul 中.

我已经创建了一个问题的 jsfiddle ( LINK )，在 JS 部分，您会在底部找到与菜单转换交互的“自定义”功能。

感谢您提供的所有帮助!

jQuery 代码 -

jQuery(function($){

    $('#main_nav').show();

    $('#clickmenu').hover(function(){
        $('#main_nav').show();
    });

    $('#main_nav').hover(function(){
        $('#main_nav').show();
    }, function(){
        $('#flyouts').hide();
    });

    $('#main_nav li').hover(function(){
        $('#flyouts').show();
        $(this).addClass('hovering');
    }, function(){
        if($('#flyouts').is(':hidden')) {
            $(this).removeClass('hovering');
        }
    });

    $('#flyouts').hover(function(){
        $('#main_nav').show();
        $('#flyouts').show();
    }, function(){
        $('#flyouts').hide();
    });

});

Answer 1

我得到了一些帮助并对此进行了排序(我相信)。检查 fiddle 的第 156 和 162 行。

编辑:以及第 183-187 行。

http://jsfiddle.net/97yD9/18/

代码-

jQuery(function($){

    $("#main_nav").menuAim({
        activate: function(a){
            var idx = $(a).index();
            $('#flyouts ul').eq(idx).show();
            $(a).css('border', '3px solid black');
            console.log(a);
        }, 
        deactivate: function(a){
            var idx = $(a).index();
            $('#flyouts ul').eq(idx).hide();
            $(a).css('border', 'none');

        }
    });