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高度問題

回答

相關問題