Question

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

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

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

由于谢里登

Answer 1

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

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

当你“滑动”你的#front div时，你的#wrapper div正在失去它的高度。

在此处查看：http://jsfiddle.net/7DFfa/4/

您还需要切换z-index div的#back，以便可以访问表单元素：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

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

3 个答案: