div在使用jQuery顯示和隱藏div後沒有通過CSS隱藏

我有一個小的web應用程序，我可以在其中顯示和隱藏DIV。然而，有時候，我需要向隱藏div的div添加CSS類（使用display:none而不是jQuery的hide()函數），因爲我仍然需要知道給定的div是否在屏幕上顯示。我通常相應地使用jQuery的addClass和removeClass。div在使用jQuery顯示和隱藏div後沒有通過CSS隱藏

但是，這樣做時我遇到了問題。看起來如果div已經隱藏並顯示之前，添加一個顯示：無類的div不會工作。

我想知道是否有任何形式的工作，我可以使用，而不訴諸於hide()。

下面是一些例子的jsfiddle向你展示一下我說的：

JSFiddle Example 1 - 將正確地使用隱藏的CSS類的DIV。

JSFiddle Example 2 - 使用show（）和hide（）函數後，它不會使用CSS類正確隱藏DIV。

來源

2012-08-08 ROFLwTIME

你遇到的是jQuery的隱藏（）的問題之後清潔格 - 函數將內聯CSS元素：

<div id="divTest" class="hideDiv" style="display: block;">

當顯示器設置爲block，所以您的hideDiv類將被內聯覆蓋，因爲它在CSS規則中被視爲「更嚴格」。一個有點醜陋的解決方法，這是你的hideDiv CSS規則改成這樣：

.hideDiv 
{ 
    display: none !important; 
}

的!important部分將使其優先於內聯CSS。

編輯：此外，我會建議用一種方式堅持顯示/隱藏的東西（你自己或 jQuery的）。使用jQuery顯示/隱藏所有顯示/隱藏，但仍然可以添加一個類進行跟蹤，只是沒有該類隱藏您的元素。

所以機會按鈕JavaScript來是這樣的：

$("#btnHideDiv").on("click", function() 
{ 
    $("#divTest").addClass("hideDiv"); 
    $("#divTest").hide(); 
});

而且完全從hideDiv類中刪除隱藏CSS。現在你仍然可以使用jQuery來查找頁面加載後隱藏的div，而不會隱藏/顯示不工作，也不必求助於!important。

對於你的問題，我會說更優雅的解決方案。

來源

2012-08-08 14:24:22 SilverSnake

我喜歡醜陋。這是迄今爲止我的問題最簡單和最簡單的解決方案。謝謝。 – ROFLwTIME 2012-08-08 14:35:11

你可以試試，

.hideDiv 
{ 
    opacity:0; 
}

來源

2012-08-08 14:21:33

我這樣做也有很多 - 我的解決辦法是不使用.hide（）/顯示所有，並簡單地創建一個「隱藏」的CSS類和切換是或添加/刪除你完成了。

這樣做的一個好處是你可以查詢.hasClass來查看它是否被隱藏（通過該類），如果你需要知道當前狀態，並且如果你最初想隱藏它，你可以簡單地添加該類到元素標記。

來源

2012-08-08 14:21:40

它因爲jquery hide()/show()放置一個內聯顯示屬性來隱藏或顯示div。所以你的班級不適用。可以使用.css('display','')使用hide()/show()

來源

2012-08-08 14:23:43 Jarry

試試這個：

http://jsfiddle.net/LgL4v/2/

它只是設置爲none使用Javascript/jQuery的而不是依靠CSS類的div的顯示屬性。

來源

2012-08-08 14:26:54 vdelricco

div在使用jQuery顯示和隱藏div後沒有通過CSS隱藏

回答

相關問題