javascript - 将 DIV 折叠到零高度

Question

好吧，我需要的应该很简单，但我似乎不知道如何让它工作:

• 我有一个 block ( <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>
  

现在，这就是:

• 如何在启动时 block 折叠的情况下开始？
• (最重要的)为什么所谓的“隐藏”方 block 在折叠后仍然保持一定的高度？ (例如，它确实崩溃了，但没有崩溃到零，它仍然完全可见)。如何解决这个问题？

Answer 1

1. How could I start with the block collapsed at startup?

   删除.in来自您的#searchArea有<div id="searchArea" class="collapse"></div>

2. Why does the supposedly "hidden" block, when collapsed, still maintains some height? (e.g. it does collapse but not to zero, it's still perfectly visible)

   显然你想要折叠的 block 已经分配了填充，这就是给出的
   当 block 折叠时，您是视觉占位符。您应该从 block 中删除填充，或者您可以尝试使用 box-sizing: border-box在您的#searchArea上.