jQuery addClass 높이 문제

Question

div를 확장하려고합니다. 그러나 모든 것은 'height'속성을 허용합니다. jQuery의 addClass 함수를 사용하여이 클래스를 추가한다.

.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"); 
    }); 

확장을 시도하는 메신저에는 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 규칙보다 더 특이하므로 승격됩니다.

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

을 그리고, 그것은 더 특이성이되고 expandHighlight 클래스가 할당 될 때 이길 것이다 :

이 같은 .expandHighlight 규칙에 더 많은 특이성을 추가하여이 문제를 해결할 수 있습니다.

CSS의 특수성 및 작동 방식에 대한 자세한 내용은 here을 참조하십시오.

<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"를 추가 :

---

또한 규칙 모두 단지 클래스로 만드는이 같은 정규 높이 규칙 후 expandHighlight 규칙을 넣어 그것을 고칠 수 #expand 개체를 사용하므로 해당 클래스가있을 때만 expandHighlight 규칙에 의해 무시되는 기본 규칙을 가져옵니다.

Answer 2

#id 선택기 .class 선택기 specificity보다 더 갖는다.

.class 선택기를 변경하여 더 많은 특이성을 가질 수 있습니다.

Answer 3

div 내부의 내용이 높이 자체보다 작은 경우 문제가 발생합니다. http://jsfiddle.net/Ajjd4/