jQuery的slideUp（）/ slideDown（）上的输入字段为空

Question

I have an input field with some text, and I am trying to toggle its visibility. The problem I'm running into is that after toggling slide animations on the field, its text is invisible. When the field is brought into focus though, the text is visible again.

I've tested this on Safari/IE/FF and the input text stays visible, but I cannot figure out why Chrome is acting so odd.

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

Answer 1

The problem is that jQuery sets the display of the input to inline-block when it does an .slideDown() and that makes Chrome render it incorrectly.

You have a couple of options, for example wrap the input in a div , or set the display to block

Answer 2

您可以尝试通过放置slideDown（）的回调来手动将其聚焦：

$(this).focus()

Answer 3

This doesn't answer the question of why Chrome behaves strangely, but, as a workaround, if you enclose your input in a div:

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

Then slideToggle the div:

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

That appears to work in Chrome.

Answer 4

作为变体，您可以使用$('input').toggle('slow')