jQuery SlideToggle和它下面的DIV

Question

這是我的網站，再次http://www.noor-azmi.com/nt/

因此，當我單擊“ Click for Darwin gallery”按鈕時，面板將向下滑動並與下面的內容重疊。

當我單擊按鈕時，如何使白色內容區域下降以為圖庫面板騰出空間？

我希望下面的內容在圖庫面板打開時自動重新調整。

這是我的Jquery代碼：

<script type="text/javascript">
    $(document).ready(function(){
        $(".fancybox").fancybox ();

        $("#darwin_button").click(function(){
          $("#darwin_panel.panels").slideToggle("slow");
        });

        $("#kakadu_button").click(function(){
          $("#kakadu_panel.panels").slideToggle("slow");
        });

        $("#alice_button").click(function(){
          $("#alice_panel.panels").slideToggle("slow");
        });
    });
</script>

Answer 1

您在非常div上有高度，這會引起問題，但是我無法全部解釋，所以這里只是解決方法。

.HomeBoxes {
    width: 300px;
    float: left;
    /* height: 400px; */
    margin-top: 10px;
    margin-left: 10px;
    background-repeat: no-repeat;
    padding-bottom: 20px;
}

和.content類div：

#content {
    clear: both;
    width: 100%;
    background-color: #FFFFFF;
    /* height: 270px; */
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
}

這將解決此問題，單擊鏈接時，填充將在底部增加更多的間距。 如果您認為填充是多余的，則可以在打開或關閉時使用jquery擴展填充。

Answer 2

這與您的盒子是浮動元素有關，后者不會在周圍的容器中自動為其創建空間。

在此處將height設置更改為min-height ：

#boxesWrapper { min-height: 430px; }

.HomeBoxes { min-height: 400px; }

（而不是“高度430像素”和“高度400像素”）

並向后續元素添加清除規則：

#content { clear: both; }