Question

我正在尝试在页面的侧面板中创建可折叠的小部件。在大多数情况下它工作正常。我可以通过转换将子div的高度设置为0px，它们就会消失。

然而，我发现textarea不会完全崩溃。当我将textarea的高度设置为0px时，似乎可以像其他div一样进行转换，但它仍然会占用更多空间，然后是0px高。

html是这样的：

<div class="container">
    <div class="heading" onclick="toggleSiblings(this)">heading</div>
    <textarea class="collapsible" placeholder="type in here..."></textarea>
</div>
<div class="container">
    <div class="heading" onclick="toggleSiblings(this)">heading</div>
    <div class="collapsible"></div>
</div>

toggleSibblings（）循环遍历具有“可折叠”类的所有兄弟，并切换它们上的“折叠”类。 “折叠”类只将高度设置为0px

这是一个显示我的问题的方法：http://jsfiddle.net/447n50cy/

有人能告诉我为什么textarea会占用额外的空间吗？

Answer 1

将float:left;或display:block;与转换为padding:0;同时使其崩溃。作为内联块元素，它有正确折叠的问题。

Answer 2

Textarea默认使用margin和padding：

你可以重置textarea：

textarea {
margin:0;
padding:0;
outline:0;
}

将此添加到您的小提琴中。问题是，当人们在textarea中输入内容时，您可能需要一些填充。您可以轻松地使用jQuery添加和删除类。

零高度textarea不是零像素高

2 个答案: