jQuery addClass height issue

Question

Я пытаюсь расширить div. Однако все работает, признавая свойство «высота». Я использую функцию addClass jQuery для добавления этого класса;

.expandHighlight 
{ 
    height:300px; 
    border-color:rgba(48,110,158,.75)!important; 
    box-shadow:0 0 5px 2px rgba(48,110,158,.5); 
} 

с использованием функции jQuery;

$('#expand').click(function() 
    { 
    $('#buttonField').css('visibility','hidden'); 
    $('#expand').addClass("expandHighlight"); 
    }); 

И div, пытающийся расширить, имеет css;

#expand 
{ 
    background-color:#F9F9F9;border-radius:3px; 
    border:1px solid #C0C0C0; 
    width:500px; 
    height:66px; 
    border-radius:2px; 
} 

Answer 1

Когда вы добавляете класс, у вас есть два правила CSS, относящиеся к одному и тому же объекту для высоты. Это означает, что правила CSS-специфики будут определять, какое правило CSS применяется.

В этом случае правило #expand имеет более специфичность, чем правило .expandHighlight, поэтому оно выигрывает.

Вы можете это исправить, добавив больше конкретики правилу .expandHighlight, как это:

#expand.expandHighlight { 
    height:300px; 
    border-color:rgba(48,110,158,.75)!important; 
    box-shadow:0 0 5px 2px rgba(48,110,158,.5); 
} 

И, тогда он будет иметь больше конкретики и выиграет, когда присваивается класс expandHighlight.

Подробнее о CSS-специфичности и о том, как она работает here.

---

Вы также могли бы это исправить, сделав оба правил только класс и положить expandHighlight правило после очередного правила высоты, как это:

<div id="expand" class="expandNormal"></div> 

.expandNormal { 
    height: 500px; 
    border:1px solid #C0C0C0; 
    width:500px; 
} 

.expandHighlight { 
    height:300px; 
    border-color:rgba(48,110,158,.75)!important; 
    box-shadow:0 0 5px 2px rgba(48,110,158,.5); 
} 

Вы бы, конечно, добавить class="expandNormal" к #expand, поэтому он получит правило по умолчанию, которое затем будет переопределено правилом expandHighlight только тогда, когда этот класс также присутствует.

Answer 2

#id селектор имеет более specificity, чем селектор .class.

Вы можете изменить селектор .class.

Answer 3

Проблема заключается в том, что содержимое внутри div меньше самой высоты. Вы должны использовать мин-высоту вместо нормальной высоты, так что класс будет выглядеть следующим образом:

.expandHighlight { 
    min-height:300px; 
    .... 
} 

Вот дем рабочий код: http://jsfiddle.net/Ajjd4/