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')