Question

我有2个子菜单的菜单。使用jQuery我想要远离hlight项目。当光标在子项上时，我无法解决如何高亮显示父项。对于悬停我使用了类caled active：

.vertical-active {
background:#0F6;
}

Jquery函数如下所示：

$(document).ready(function (e) {
$('.submenu a').hover(

function () {
    $(this).addClass('vertical-active');
    $(this).parent('vertical-links a').addClass('vertical-active');
    },

    function () {
        $(this).removeClass('vertical-active');
        $(this).parent('vertical-links a').removeClass('vertical-active');
    });
});

问题出现在父选择器中，但我不知道如何选择子菜单的父项。

JSFiddle链接：http://jsfiddle.net/6g9tZ/4/

Answer 1

$(document).ready(function() {
    $('.submenu a').on('mouseenter mouseleave', function() {
        $(this).add($(this).closest('ul').closest('li').children('a')).toggleClass('vertical-active');
    });
});

FIDDLE

修改

也要强调父母，你要做

$('.vertical-links > li > a').on('mouseenter mouseleave', function() { $(this).toggleClass('vertical-active') });

FIDDLE

Answer 2

除了.siblings之外，请使用.closest。

FIDDLE

$(document).ready(function (e) {
    $(".vertical-links > li > a").on("mouseenter mouseleave", function(){
        $(this).toggleClass('vertical-active');
    });    

    $('.submenu a').on("mouseenter mouseleave",function () {
        $(this).toggleClass('vertical-active');
        $(this).closest("ul").siblings("a").toggleClass('vertical-active');
    });    
});

Answer 3

用以下代码替换代码的相关部分：

$(this).parents('li:eq(1)').find("> a").addClass('vertical-active');
....
$(this).parents('li:eq(1)').find("> a").removeClass('vertical-active');

您的代码存在的一个问题是，您正在寻找父母<a>＆＃34;，但没有这样的事情; <a>是您父母的孩子。所以我们在这里搜索一个父<li>，而不是直接的，但实际上是祖父母，找到它的直接<a>孩子并突出显示它。

此外，你有parent('vertical-links')应该是parent('.vertical-links')（不是点：它的类不是元素）。

在悬停子项时突出显示父项

3 个答案: