Question

Really baffled here. I’m just trying to do an addClass('test') on a hovered target… my jQuery looks like this:

//#nav-main dropdown effects                
$('#nav-main ul li').hover(function () {
     $('#nav-main ul li').addClass('test');
   $(this).find('.dropdown').stop(true,true).slideToggle('slow');
   $('#nav-main ul li').removeClass("test");
});

The return, however is the HTML going from this:

<li id="menu-events">

to this:

<li id="menu-events" class="">

Any ideas why?

Answer 1

You’re adding and removing the class in the same function. jQuery doesn’t remove the class attribute, even if empty. It seems you’re missing the other callback function for hover–did you want to remove the class on roll out? It seems you want something more like this:

//#nav-main dropdown effects                
$('#nav-main ul li').hover(function () { // onRollOver
     $('#nav-main ul li').addClass('test');
     $(this).find('.dropdown').stop(true,true).slideDown('slow');
}, function() { // onRollOut
     $('#nav-main ul li').removeClass("test");
     $(this).find('.dropdown').stop(true,true).slideUp('slow');
});