在悬停时将类添加到li，但从所有其他对象中删除

Question

我需要为悬停时的li添加一个类，但从列表中的所有其他li删除相同的类（这是用于导航）。

到目前为止，我的代码是：

jQuery(".navcontent").on('mouseenter', 'li', function() {
    if (jQuery('.childmenu', this)) {
        jQuery('.childmenu', this).addClass("child-active");
    } else {
        jQuery('.navcontent li .childmenu').removeClass("child-active");
    }
});

我无法完全解决需要做的事情...

任何帮助将非常感激。

Answer 1

您可以通过其他方法来做到这一点：

1. 首先删除所有元素的类，然后添加所需的元素：

jQuery(".navcontent li").on('mouseenter', function() {
        jQuery('.childmenu').removeClass("child-active");
        jQuery('.childmenu', this).addClass("child-active");
    });

2. 如果他们是兄弟姐妹，则可以使用siblings ：

jQuery(".navcontent li").on('mouseenter', function() {
        jQuery('.childmenu', this).addClass("child-active")
          .siblings('.childmenu').removeClass("child-active");
    });

Answer 2

请检查下面的代码

 jQuery(".navcontent li").on('mouseenter', function(event) { jQuery('.navcontent li').removeClass("child-active"); jQuery(this).addClass("child-active"); }); 

 .child-active { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <ul class="navcontent"> <li>Links</li> <li>Links</li> <li>Links</li> <li>Links</li> <li>Links</li> </ul> 

Answer 3

jQuery(".navcontent li").on('mouseenter', function(event) {
    jQuery('.navcontent li .childmenu').removeClass("child-active");
    jQuery(event.target).addClass("child-active");

});

Answer 4

jQuery(".navcontent li").on('mouseover', function() {
    jQuery(".navcontent li .childmenu").removeClass('child-active');
    jQuery(this).addClass('child-active');
});

使用上面的代码

Answer 5

jQuery(".navcontent li").on('mouseenter', function() {
    jQuery(".navcontent li").removeClass("child-active");
    jQuery(this).addClass("child-active");
});