jQuery addClass高度问题

我正在尝试扩展div。然而，所有作品都接受“高度”属性。我使用jQuery的addClass函数来添加这个类;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"); 
    });

而div即时尝试扩大有CSS;

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

来源

2012-03-17 Ali

ID选择器必须由尖锐的前缀：' ＃expand'。 – 2012-03-17 17:24:12

当您添加类时，您将拥有两个属于同一个高度对象的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规则覆盖。

来源

2012-03-17 17:24:24 jfriend00

非常感谢！它解决了。你让我学习了CSS中的一个重要规则。非常感谢！ – Ali 2012-03-17 17:26:11

的#id选择具有比.class选择更specificity。

你可以改变.class选择器有更多的特异性。

来源

2012-03-17 17:22:49 alex

问题在于div内的内容小于高度本身。你必须使用最小高度，而不是正常的高度，使班会是这样的：

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

这里是工作的代码演示：http://jsfiddle.net/Ajjd4/

来源

2012-03-17 17:27:09 ajimix

jQuery addClass高度问题

回答

相关问题