帶有jQueryUI的Textarea可調整大小後保持尺寸

以下是模擬我遇到的問題的示例代碼測試工具。基本上，當不使用resizable（）作爲textarea時，單擊「Content [+/-]」可以使字段集合摺疊並且不顯示textarea。但是，使用可調整大小時，單擊「Content [+/-]」會導致文本區域被隱藏，但textarea的原始尺寸將保留，並且字段集不會摺疊，並且調整大小圖標仍顯示在右下角。帶有jQueryUI的Textarea可調整大小後保持尺寸

有沒有更好的方法來構造HTML或我錯過了jQuery/jQueryUI的操作？

謝謝。


<!DOCTYPE html> 
<html> 
<head><title>SO,2</title> 
<script 
    type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
</script> 
<script 
    type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"> 
</script> 
<link 
    rel="stylesheet" 
    type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/> 
</head> 
<body> 

<div id="squish1"> 
    <fieldset id="fs1"> 
    <legend id="lg1">Content [+/-]</legend> 
    <textarea rows="10" cols="80" name="ta1" id="ta1"></textarea> 
    </fieldset> 
</div> 

<script type="text/javascript"> 
$('#ta1').resizable(); 
$('#fs1').click(function(){ 
    $('#ta1').toggle(); 
}); 
</script> 
</body> 
</html>

來源

2010-10-02 JTP

resizable（）在要調整大小的元素周圍創建一個包裝。如果隱藏的文本區域，大小和包裝不會改變的顯示，所以它仍然需要它的地方

使用

$('.ui-wrapper',this).toggle();

，而不是

$('#ta1').toggle();

它會隱藏包裝（當然還有textarea，因爲它在包裝內）

如果你只想在圖例接收到點擊時切換，改變click（） - Fun轉換成：

$('#lg1').click(function(){ 
    $('.ui-wrapper',this.parentNode).toggle(); 
});

來源

2010-10-02 22:41:41

不錯！奇蹟般有效。謝謝。 – JTP 2010-10-02 23:15:07

注意：$（'。ui-wrapper'，this）.toggle（）解決了核心問題，但提出了另一個問題。字段集內的每次點擊都會觸發切換，即使在textarea本身也會觸發，從而防止編輯文本內的文本。 – JTP 2010-10-03 00:20:08

查看上面我的答案更新;） – 2010-10-03 00:34:37

帶有jQueryUI的Textarea可調整大小後保持尺寸

回答

相關問題