使用JQuery SlideToggle而不在下面移動內容

Question

我有兩個DIV，它們需要在頁面上占據相同的空間。 背面DIV具有一些形狀元素，我允許用戶滑動正面DIV以訪問背面DIV。

問題是，前DIV下方的內容在后DIV上方向上移動。 我怎樣才能解決這個問題？

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

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

謝謝謝里丹

Answer 1

您需要設置包裝器的高度：

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

當您“ slideUp”您的#front div時，您的#wrapper div正在失去高度。

看到它在這里工作： 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")
});​

或者，您可以切換兩個div： 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添加高度是一種選擇。 另一個是設置按鈕的絕對位置，並為其添加一個等於包裝紙高度的頂部。 jsfiddle