javascript - 将 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，否则您可以在正文中执行此 onload 属性

Answer 3

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