使用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