悬停子项时突出显示父项答案

【问题标题】：Hilighting parent item while hovering child item悬停子项时突出显示父项
【发布时间】：2014-06-01 01:27:07
【问题描述】：

我有 2 个子菜单的菜单。使用 jQuery 我想突出显示悬停的项目。当光标位于子项上时，我无法解决如何突出显示父项。对于悬停，我使用了 class 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/

【问题讨论】：

您到底想强调什么？应该是 ul 类 submenu

标签： javascript jquery css

【解决方案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

【讨论】：

你可以添加代码以在悬停时突出显示父项吗？
@IvanPandžić - 已添加！

【解决方案2】：

在.closest 之外使用.siblings。

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');
    });    
});

【讨论】：

你可以添加代码以在悬停时突出显示父项吗？

【解决方案3】：

将代码的相关部分替换为：

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

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

此外，您还有parent('vertical-links')，应该是parent('.vertical-links')（不是点：它是一个类而不是一个元素）。

【讨论】：