目标家长李

Target Parent li

本文关键字：目标家      更新时间：2023-09-26

我已经在stackoverflow中搜索了解决方案，我的问题之所以是新的（我认为）是因为使用的HTML布局。

Ques-在我在我们网站上实现的类似亚马逊的菜单（相关帖子）中，当鼠标进入其相关的Child-li时，我无法在Parent li上保持悬停。

现在，如果我在父布局中使用child（我相信），这可能很容易，但我们的html布局（一定要使用）不同，其中parents元素在一个ul中，childs在另一个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();
    });
});

我得到了一些帮助并对此进行了排序（我相信）。检查小提琴的线路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');
        }
    });
相关文章：