悬停子项目时高亮显示父项目

Hilighting parent item while hovering child item

本文关键字：项目 显示 高亮 子项目 悬停      更新时间：2023-09-26

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

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

小提琴

编辑:

也要突出显示父元素，您可以使用

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

小提琴

在.closest之外使用.siblings

小提琴

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

将相关代码替换为:

$(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')(不是点:它是一个类，而不是一个元素)。

相关文章：