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

Question

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

问题是，前面的 DIV 下面的内容向上移动到后面的 DIV 之上。我该如何解决这个问题？

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

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

谢谢 谢里登

Answer 1

您需要设置包装器的高度:

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

当您“向上滑动”#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")
});​