有按鈕（ID = 「hide_message_button」）和消息（ID = 「消息」）。點擊按鈕應該隱藏/顯示消息。源代碼：如何顯示與jQuery /隱藏DOM元素？
$('#hide_message_button').click(function(){
var bool = $('#message').css('visibility','hidden').is(':hidden');
if(bool){
$('#message').show();
$(this).val('Hide');
}
else {
$('#message').hide();
$(this).val('Show');
}
});
我有一個錯誤：消息被隱藏的按鈕第一次點擊，並沒有再顯示（但按鈕的值改爲「顯示」）。怎麼了？謝謝。
嘗試：
$('#hide_message_button').click(function(){
$('#message').toggle();
});
具有visibility: hidden風格屬性的元素是而不是隱藏，因爲它們佔用佈局空間。嘗試：
var bool = $('#message').is(":hidden");
或：
var bool = $('#message:hidden').length;
或：
var bool = $('#message').css("display") == "none";
從manual：
元素可以被認爲是隱藏的幾個原因：
- 他們有沒有的CSS顯示值。
- 它們是type =「hidden」的表單元素。
- 它們的寬度和高度明確設置爲0.
- 祖先元素被隱藏，因此元素不會顯示在頁面上。
的感謝！我嘗試了所有三個選項，三個都完全正確。 「長度」是非常有趣的解決方案。 – 2012-03-06 10:06:26
看看在toggle功能。
<input type="button" id="hide_message_button" value="My button" />
<p id="message">A message</p>
和
$('#hide_message_button').click(function(){
$('#message').toggle();
});
我不明白爲什麼按鈕也消失了，如果你只是切換的'＃message' ID ... – talnicolas 2012-03-05 16:51:40
是的，你是對的。我寫了一些不同的東西。此代碼工作正常。謝謝。 – 2012-03-05 17:03:59
這是因爲css('visibility','hidden')調用隱藏消息，然後它永遠不會再次顯示，因爲show方法不改變visibility風格。
的元件隨後將被隱藏（顯示=塊，能見度=隱藏）和被除去（顯示=無，能見度=隱藏）之間切換。在一種狀態下，元素佔用空間，但是消息在兩種狀態中都不顯示。
只是刪除設置visibility風格的代碼，代碼工作。
我認爲布爾也具有真正的價值，因爲按鈕的值隨着從「顯示」到「隱藏」和反之亦然每次點擊而改變。我還用警報消息測試了它，並將其放入「if」塊中。 – 2012-03-05 16:58:47
@tatiana_c：是的，它的確如此。我已經用更準確的描述和更正的代碼更新了我的答案。 – Guffa 2012-03-05 17:05:10
非常感謝您的演示和答案。它有效，它很棒。 – 2012-03-06 09:22:07
太棒了，它的工作原理。謝謝。 – 2012-03-05 16:54:13