Question

以下是一个示例代码测试工具，它模拟我遇到的问题。基本上，当不对textarea使用resizable（）时，单击“Content [+/-]”允许字段集折叠并且不显示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>

Answer 1

resizable（）在要调整大小的元素周围创建一个包装器。如果你隐藏了textarea，那个包装器的大小和显示都不会改变，所以它仍然需要它的位置

使用

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

而不是

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

它会隐藏包装器（当然还有textarea，因为它在包装器内）

如果您只想在图例收到点击时切换，请将点击（） - 功能更改为：

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

带有jQueryUI可调整大小的Textarea在切换后保留尺寸

1 个答案: