jQuery的slideUp（）/ slideDown（）上的輸入字段為空

Question

我有一個帶有一些文本的輸入字段，並且我試圖切換其可見性。 我遇到的問題是，在現場切換幻燈片動畫后，其文本不可見。 但是，當該字段成為焦點時，該文本將再次可見。

我已經在Safari / IE / FF上對此進行了測試，並且輸入文本仍然可見，但是我無法弄清楚Chrome為什么如此奇怪。

http://jsfiddle.net/f63Et/1/

Answer 1

問題在於，當jQuery執行.slideDown()時，它.slideDown()輸入的顯示設置為inline-block ，這會使Chrome錯誤地呈現它。

您有幾個選項，例如， 將輸入包裝在div中 ，或將顯示設置為block

Answer 2

您可以嘗試通過放置slideDown（）的回調來手動將其聚焦：

$(this).focus()

Answer 3

這不能回答為什么Chrome表現異常的問題，但是，作為一種解決方法，如果將輸入內容括在div中：

<div id="text"><input type="text" /></div>

然后slideToggle div：

$(document).on('click', '#slide', function() {
    $('#text').slideToggle();
});

在Chrome中似乎可以正常工作。

Answer 4

作為變體，您可以使用$('input').toggle('slow')