jQuery addClass不起作用，但是css可以

Question

Does Not Work

CSS

.active 
{
    display: block;
}

JS

$("#li_1 ul").addClass('active');

Does Work

JS

$("#li_1 ul").css('display', 'block');

Which leads to me my question, why does the css function work and not the addClass? There's no difference between the selectors at all.

Additional info -

• Using jQuery version 1.6.4
• JS in question here resides in a .js file being included in an ASP.NET masterpage
• masterpage has link to stylesheet containing the CSS in question here (ie - the 'active' style is available to the masterpage)

Answer 1

What about using this statement:

.active {
  display:block !important;
}

I think something overrides your .active rule in your CSS stylesheet.

More informations about CSS priorities right here .

Answer 2

Without seeing your HTML it's hard to say for sure why it's not working. I can say that the JS you've posted should work fine. I have a working example here:

http://jsfiddle.net/hsyEw/1/

One thing that jumps out is that this selector $("#li_1 ul") looks a little weird. do you really have a ul element that is a child of an element with an id that implies it is an li ?

Your second JS example is applying style directly to the element which will overwrite any CSS Class styles that are being applied, so if you have some other CSS present that is affecting that element this could explain the behavior you are seeing.