javascript - Chrome 上的 toggleSlide 问题 - 剪切字母/不可见文本

Question

我正在使用 jquery 1.8.2 和 toggleSlide 动画来顺利显示搜索输入框，但在 chrome 上有两个问题 - 其中一个我已经分成了一个 jsfiddle

$('#hiddenBlock').slideToggle(500);
$('#inputHiddenBlock').slideToggle(500);
$('#but').slideToggle(500);

在 chrome 上打开这个小提琴并单击按钮 - 在文本框中写入一些文本并再次单击按钮两次 - 一个隐藏第二个再次显示 - 文本现在不可见并保持这种状态，直到 fe 再写一个字母刷新。

这可能也与第二个问题有关，这似乎与画布/显示文本有关 - 它允许将像“l”这样的字母切成两半......

在该示例中，您会看到“l”和“t”：
“l”和“t”http://img171.imageshack.us/img171/5784/beztytuuvxq.png

Answer 1

您不需要slideToggle文本框和搜索按钮。只需要 divhiddenBlock就足够了。

我简化了您的解决方案：

// on dom ready hides your div
$(document).ready(function(){
  $('#hiddenBlock').hide();
});

 function toggleSearchWindow() {
   $('#hiddenBlock').slideToggle("fast");
 }

 $('input[type=button]').click(function() {
   toggleSearchWindow();
 });​

测试

更新我将输入的文本放在一个临时变量中，看看这是否解决了你的剪切文本：

测试2

Answer 2

尝试删除

display:none;

从 #inputhiddenblock 和 #but css 然后删除

$('#inputHiddenBlock').slideToggle(500);
$('#but').slideToggle(500);

Answer 3

我已经更新了你的 jsfiddle 链接。

问题是您没有初始化输入文本字段，并且在输入文本字段的 dom 加载中，我们已将其初始化为内联而不显示任何内容。

我已经评论过了；

$('#inputHiddenBlock').slideToggle(500);