jquery - jQuery addClass高度问题

我正在尝试扩大股利。但是，一切正常，都接受“ 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");
   });

尝试扩展的div具有CSS；

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

最佳答案

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