如何使用button操作在使用jQuery的textarea的两种状态之间切换

Question

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

如上图所示，其中一列（在每一行中）有一个按钮（OpenPad），我用它来增加textarea的高度，如下所示:

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

这种安排的目的是节省空间。结果如下图所示:

但是，如果我想将按钮操作从默认的textarea高度切换到增加的高度，然后返回到默认值，它不会发生。我使用以下方法尝试了切换操作:

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

当第二次单击OpenPad按钮时，文本区域将完全隐藏，而不是恢复到默认状态。这里简明扼要地说明了这一点:

toggle（）方法在选定元素的hide（）和show（）之间切换。

在周长下，我如何在文本区域的两种状态之间切换（从默认大小到预期大小，然后返回）？

Answer 1

在这种情况下，您应该为扩展textarea创建一个类，例如:

.extended {
   height: 65px;
}

然后使用。toggleClass（）更改TextArea的状态:

$('#'+ constructeIdQuesFld).toggleClass('extended')

Answer 2

您可以使用textarea代替input[type=text]。那么toggle函数是关于更改相应textarea的rows属性的值。

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