jquery - slideToggle 留下空白空间

Question

所以我正忙于这个元素，它涉及一个在单击按钮时上下滑动的横幅:

 $("#open").click(function() {
    $("#banner").slideToggle("slow");
  });

如您所见，只要单击打开 按钮，横幅就会向上或向下滑动，具体取决于它的当前状态。

但是当横幅向上滑动时，会创建一个空白区域，如您在示例 1 中所见:

当显示横幅时，剩下的空间非常少，这就是我想要的效果，如您在示例 2 中所见:

(“parkbench”是横幅的底部，但如果我截取完整图片，帖子会很长。)

现在，我想要实现的是两个元素之间的空间保持不变，当不显示横幅时也是如此。

HTML 非常简单:

    <div id="banner">
            <div id="djbanner"></div>
        </div>



<div style="float:left; margin-left:0.55%; margin-top:210px; width:42%">
<div class="vak">
    <div class="vak_top"><p class="text">Box</p></div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, 
</div>

我知道有一个 div 没有关闭，但那是因为它下面还有另一个 div，这对于这个问题来说并不是真正必要的。

有没有办法达到我想要达到的效果？

谢谢，

罗布

Answer 1

看起来好像额外的空间是由它下面的 div 的布局引起的，具有较大的 margin-top 设置。最快的解决方法是使用 slideToggle 调用在同一个 JS 函数中更改 margin-top，但理想情况下，您希望消除 float 和较大的 margin-top 并找到一种使用常规页面流实现该布局的方法。