javascript - 使用 JQuery SlideToggle 而不移动下面的内容

Question

我有两个 DIV 需要在页面上占据相同的空间。后 DIV 有一些表单元素，我允许用户滑动前 DIV 以访问后 DIV。

问题是，前面 DIV 下方的内容在后面 DIV 之上向上移动。我怎样才能解决这个问题？

这是我现在正在做的一个例子。

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

谢谢谢里登

Answer 1

You need to set the height of your wrapper:

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

When you "slideUp" your #front div, your #wrapper div is losing its height.

See it working here: http://jsfiddle.net/7DFfa/4/

You'll also need to toggle the z-index of your #back div so that the form elements can be accessed: 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")
});​

Alternatively, you could toggle both 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 添加高度是一种选择。另一个是为按钮设置绝对定位并为其添加一个等于包装器高度的顶部。jsfiddle

Answer 3

尝试将高度添加到包装器 div

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

由于第一个 div 扩展，</br>但第二个 div 不包含任何“可扩展”标签，因此它的高度较小。