如何从其他父类中移除添加的类

How to remove the added class from other parent li?

本文关键字：添加 其他 父类      更新时间：2023-09-26
<ul id="nav">
   <li id="SubnavGrpTwo" class="navitem">
      <a class="panel"><span class="vcufon btnLabel">Main menu</span></a>
      <ul>
         <li id="itemOne">
            <a class="panel vcufon subMenu"><span>Submenu One</span></a>
         </li>
      </ul>
   </li>
   <li id="SubnavGrpThree" class="navitem">
       <a class="panel"><span class="vcufon btnLabel">Main menu</span></a>         
   </li>
</ul>

概要:我有下拉菜单，是在悬停子菜单列表项上添加背景图像。如

我目前使用以下jquery代码。

$(document).ready(function () {
$("#nav li ul li a").hover(function () { // on hover submenu list item                          
    $('#nav li').addClass('setHover') //Add class on main menu list item 
},(function(){
         $("#nav li").removeClass('setHover').fadeIn(1000); //Remove class from main menu list item 
   }));
});

问题:我需要删除这个(setHover)类在其他主菜单列表项

  • 除了一个，目前处于悬停状态。

    干杯!

    • 我想你想要这个:

    $("#nav li").not(this.parent()).removeClass('setHover').fadeIn(1000);

    应该这样做…

    $(document).ready(function () {
    $("#nav li ul li a").hover(function () { // on hover submenu list item
        $(this).closest('#nav > li').addClass('setHover').siblings().removeClass('setHover'); //Add class on main menu list item 
    },(function(){
        $(this).closest("#nav > li").removeClass('setHover').fadeIn(1000); //Remove class from main menu list item 
    }));
});
    在<<p> 演示/strong> http://jsfiddle.net/gaby/A4kB3/

    好吧，我可能不明白你的问题，但这是我尝试使用的:

    $("#nav li ul li").hover(function() { // on hover submenu list item   
    $(this).addClass('setHover');
}, (function() {
    $("#nav li ul li").removeClass('setHover');
}));

    您使用$('#nav li')来设置类，但这会为所有的#nav li添加一个类。

    查看这个jsFiddle的实例:http://jsfiddle.net/PnSTH/

    这样做怎么样:

    #nav li a {
  /*styles...*/
}
#nav li a:hover
{
    background: url(http://placekitten.com/g/200/200) no-repeat center center;
}

    抱歉，如果我低估了，但这似乎是jQuery过度使用的东西，你可以实现一些CSS。

    小提琴:http://jsfiddle.net/pKmzw/1/

    这将达到您的目的

    $(document).ready(function () {
    $("#nav li ul li a").mouseover(function () { // on hover submenu list item     
        $("#nav li").removeClass('setHover').fadeIn(1000); //Remove class from main menu list item
        $(this).parents("#nav li").addClass('setHover') //Add class on the main menu list item you want only
    });
});

    显然你不想要一个悬停功能，你只需要第一部分，"mouseover"，而不是"mouseleave"。我以前只支持IE6，但现在你应该只使用CSS。

    相关文章：