将DIV折叠到零高度

Question

好的，我需要的应该是非常简单但我似乎无法弄清楚如何使它工作：

• 我有一个块（<div id="searchArea" class="collapse in"></div>），我正试图折叠/显示

• 我正在使用以下与Bootstrap兼容的代码：

  <div class="row" style="margin-left:20px;">
        <button data-toggle="collapse" data-target="#searchArea">SEARCH</button>
  </div>
  

现在，这是：

• 如何从启动时崩溃的块开始？
• （最重要的）为什么所谓的“隐藏”区块在倒塌时仍保持一定的高度？ （例如它确实崩溃但不是零，它仍然完全可见）。怎么能修好？

Answer 1

1.   

   如何从启动时崩溃的块开始？

   从.in移除#searchArea以<div id="searchArea" class="collapse"></div>

2.   

   为什么所谓的“隐藏”区块在折叠时仍保持一定的高度？ （例如，它确实崩溃但不是零，它是   仍然完全可见）

   显然你想要折叠的块有分配的填充，这就是给出的内容 折叠块时的可视占位符。您应该从块中删除填充，或者尝试使用box-sizing: border-box上的#searchArea。

Answer 2

如果你在这里给我们一些代码，它会很有用但是试试;

display : none;

而不是

display : hidden;

除非你不使用jquery

，否则你可以在body中执行此onload属性

Answer 3

如果您正在使用jquery，请使用slideUp。它会向div向上滑动display:none;