Использование JQuery SlideToggle без перемещения содержимого Ниже

Question

У меня есть два DIV, которые должны занимать одно и то же место на странице. Обратный DIV имеет некоторые элементы формы, и я разрешаю пользователю перемещать переднюю DIV, чтобы получить доступ к обратному DIV.

Проблема в том, что содержимое под передней DIV перемещается вверх по спине DIV. Как я могу это исправить?

Вот пример того, что я делаю сейчас.

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

Благодаря Шеридан

Answer 1

Вы должны установить высоту вашей обертке:

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

Когда вы «slideUp» ваш #front ДИВ, ваш #wrapper ДИВ теряет высоту.

Смотреть это работает здесь: http://jsfiddle.net/7DFfa/4/

Вам также необходимо, чтобы переключить z-index вашего #back DIV так, чтобы элементы формы можно получить: 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 id="wrapper" style="width:400px;height:140px;"> 

Первый ДИВ расширить благодаря </br> но второй ДИВ не содержит «расширяемой» метки, поэтому его высота меньше.

Answer 3

Добавление высоты в обертку Div включено e. Еще один параметр устанавливает абсолютное позиционирование для кнопки и добавляет верхнюю часть для нее, равную высоте обертки. jsfiddle