Question

我需要找到一种方法来展示徘徊在李的孩子们。

我是这个

$('.menu.horizontal li').hover(function(event) {
                        if(event.currentTarget === this) {
                            $(this).addClass('hover');
                            if($(this).hasClass('pai') && $(this).hasClass('hover')) {
                                $(this).find('.nivel_1').css('display', 'block');
                                $(this).find('li nivel_1').css('display', 'block');
                            } else {
                                $('li nivel_1').css('display', 'none');
                                $('.nivel_1').css('display', 'none');
                                $(this).removeClass('hover');
                            }
                        }
                    });

我在hover上的元素会检查类'pai'并显示.nivel_1，但是如果我还有更多.nivel_1它们都显示出来......所以我需要只显示悬停的元素子元素。我该怎么做？

由于

Answer 1

if(event.currentTarget === this) {
    if($(this).hasClass('pai')) {
        $(this).find('> .nivel_1').css('display', 'block');

        // This line doesn't actually make sense so I've commented it out
        //$(this).find('li nivel_1').css('display', 'block');
    }
}

假设此代码在hover事件的mouseover部分中运行。

Answer 2

当用户悬停时，使用hover() jQuery函数向<li>添加一个类。然后你可以使用css来显示/隐藏子元素。

$('li').hover(
    function() { $(this).addClass('hover'); },
    function() { $(this).removeClass('hover'); }
);

然后使用以下CSS：

li *       { display: none; }
li.hover * { display: block; }

如果CHILD有课，则悬停的jquery元素，CHILD做某事

2 个答案: