如何使用按钮操作使用 jQuery 在文本区域的两种状态之间切换

Question

在我的 HTML table 中，我正在动态添加行。

如上图所示，其中一列（每行）有一个按钮（OpenPad），我用它来增加文本区域的高度像这样：

$('#'+ constructeIdQuesFld).height(65);

这种安排的目的是为了保护 space。结果如下图所示：

但是，如果我想将按钮操作从默认的文本区域高度切换到增加的高度并返回到默认值，它不会发生。我尝试使用以下方法进行切换操作：

$('#'+ constructeIdQuesFld).toggle().height(65);

第二次点击OpenPad按钮时，textarea完全隐藏，而不是恢复到默认状态。简明扼要地说 here:

The toggle() method toggles between hide() and show() for the selected elements.

在这种情况下，如何在文本区域的两种状态之间切换（从默认大小到预期大小再返回）？

Answer 1

您可以使用 textarea 而不是 input[type=text]。那么toggle函数就是改变对应textarea的rows属性的值。

$('thebutton').click(function(){
   $('thetextarea').attr('rows',  $('thetextarea').attr('rows')==1?5:1);
})

How to use button action to toggle between two states of a textarea using jQuery