带有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可调整大小后保持尺寸

回答

相关问题