使用JQuery SlideToggle沒有移動下面的內容

Question

我有兩個DIV需要佔用頁面上的相同空間。後DIV有一些表單元素，我允許用戶滑動前DIV以訪問後DIV。

問題是，前DIV下的內容正在向後移動DIV的頂部。我怎樣才能解決這個問題？

這是我現在正在做的一個例子。

http://jsfiddle.net/7DFfa/3/

感謝 謝里登

Answer 1

你需要設置你的包裝高度：

$("#wrapper").height($("#front").height()); 

當你「效果基本show」你#front DIV，你的DIV #wrapper正在失去它的高度。

看到它在這裏工作：http://jsfiddle.net/7DFfa/4/

您還需要切換您#back div的z-index使表單元素可以訪問：http://jsfiddle.net/7DFfa/5/

$("#opener").toggle(function() { 
    $("#front").stop().slideToggle(function() { 
     $("#back").css("z-index", "1"); 
    }); 

    $(this).text("Show Front"); 
    }, function() { 

    $("#back").css("z-index", "-1"); 
    $("#front").stop().slideToggle(); 

    $(this).text("Show Back") 
});​ 

或者，您可以切換兩divs：http://jsfiddle.net/7DFfa/7/

$("#back").hide(); 
$("#wrapper, #back").height($("#front").height()); 

$("#opener").toggle(function() { 
    $("#front").stop().slideToggle(); 
    $("#back").stop().slideToggle(); 
    $(this).text("Show Front"); 
    }, function() { 
    $("#front").stop().slideToggle(); 
    $("#back").stop().slideToggle(); 
    $(this).text("Show Back") 
});​ 

Answer 2

嘗試增加高度爲包裝DIV

<div id="wrapper" style="width:400px;height:140px;"> 

第一個div擴大得益於</br>但第二次DIV不包含任何 「可擴展」 標籤，所以它的高度更少。

Answer 3

將高度添加到包裝div上e選項。另一個是爲按鈕設置絕對定位，併爲其添加一個與包裝高度相等的頂部。 jsfiddle