toggleSlide問題 - 切割字母/隱形文字

我使用jQuery 1.8.2和toggleSlide動畫smootly顯示搜索輸入框，但那些對鉻兩個問題 - 他們中的一個，我分成a jsfiddle toggleSlide問題 - 切割字母/隱形文字

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

在Chrome中打開this fiddle並點擊按鈕 - 寫在文本框中一些文本，然後再次單擊按鈕兩次 - 一個隱藏第二再次顯示 - 文本現在是無形的，一直如此，直到FE得到刷新再寫一封信。

這也許也連接到第二個問題，這似乎是連接到帆布/顯示文本 - 它允許切信件像一分爲二「L」 ....

在那個例子中，你看到「L」和' t'：
'l' and 't' http://img171.imageshack.us/img171/5784/beztytuuvxq.png

來源

2012-12-20 nilphilus

無法複製這個問題 –

我沒有看到任何文字我或噸被打斷輸入。我也沒有得到你的第一個問題。 –

您不需要slideToggle這兩個文本框和搜索按鈕。只需div hiddenBlock就足夠了。

我simplyfied您的解決方案：

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

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

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

TEST

UPDATE我放在一個臨時變量輸入的文本，看看這是否解決您的板缺的文字：

TEST2

來源

2012-12-20 09:43:51 anmarti

我知道它 - 它看起來有點漂亮 - 但如果這是唯一的解決方案，我會走這條路 – nilphilus

，並且不幸的是這打破了我的第二個問題......但它也與頁面佈局相關和我單獨失敗jsfiddle ... – nilphilus

你可能包含更多的代碼，以便我們可以看到爲什麼你的文本被切斷，因爲我可以看到在這個jsfiddle。 – anmarti

嘗試刪除

display:none;

從#inputhiddenblock和#but CSS，然後刪除

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

來源

2012-12-20 09:44:07 Ciack404

我有更新的jsfiddle鏈接。

問題是您沒有初始化輸入文本字段，並且在輸入文本字段的dom加載中，我們已經初始化爲內聯不顯示無。

我已評論它;

$（'＃inputHiddenBlock'）。slideToggle（500）;

來源

2012-12-20 10:47:46

toggleSlide問題 - 切割字母/隱形文字

回答

相關問題