悬停时，使用 jQuery 将类添加到特定菜单项

Add class with jQuery to specific menu-items when hovering

本文关键字：添加 菜单项 使用 jQuery 悬停      更新时间：2023-09-26

当悬停带有图像的菜单时，我想将带有jQuery的类添加到特定的菜单项中。菜单项具有在其他地方硬编码的项 ID。下面的代码正在工作，但我必须对每个特定的菜单项进行编码，这不是我的意图。

jQuery(document).ready(function(){
    jQuery('.menu > li.item-447 > a').hover(function() {
        jQuery('.menu > li.item-447 > a > span').toggleClass('nav-label');
    });
    jQuery('.menu > li.item-449 > a').hover(function() {
        jQuery('.menu > li.item-449 > a > span').toggleClass('nav-label');
    });
    jQuery('.menu > li.item-... > a').hover(function() {
        jQuery('.menu > li.item-... > a > span').toggleClass('nav-label');
    });
});

我已经尝试过这段代码，但是在悬停所有菜单项时，都会获得额外的类"导航标签"。 

jQuery(document).ready(function(){
    jQuery('.menu > li.item > a').hover(function() {
        jQuery('a', this); 
        jQuery( '.menu > li > a > span' ).toggleClass( 'nav-label' );
    });
});

有什么建议吗？

您可以通过this关键字获取特定的菜单项，并使用jQuery(this)将其转换为jQuery对象。

试试这个：

jQuery(document).ready(function(){
    jQuery('.menu > li > a').hover(function() {
        jQuery(this).children('span').toggleClass('nav-label');
    });
});
相关文章：