Как избежать того, чтобы JQuery toggle() в div макета вызывал перемещение вашего макета?
Вопрос
У меня есть функция JQuery, которая переключает один из элементов div в моем макете.Проблема в том, что весь макет перемещается по экрану, когда элемент div появляется или исчезает.Есть ли способ добиться того же эффекта отображения/скрытия без изменения макета?
<script>
$(document).ready(function(){
$("button").click(function () {
$("#layoutDiv").toggle();
});
});
</script>
Решение
Вы можете обернуть этот div в другой div, который поддерживает правильную ширину/высоту, чтобы сохранить единообразие макета.
<div style="width:300px;height:200px">
<div class="animateMe">
<p>When I close, the outer div will still be there.</p>
</div>
</div>
Если вы заранее не знаете высоту/ширину, вы можете установить ее программно с помощью javascript при загрузке страницы.Просто получите значения .width() и .height() складного div и примените их к CSS внешнего div.
Другие советы
Попробуйте написать новую функцию, использующую видимость:скрыто вместо отображения:никто.Это сохранит поле CSS (и макет) без отображения элемента div.
Ответ Джонатана Сэмпсона сработает - в качестве альтернативы, не зная, что именно вы делаете (разметка и требуемый эффект), я бы использовал абсолютное позиционирование с высоким z-индексом, что исключит его из потока документов.Это то, что обычно используют модальные окна/лайтбоксы.Вот руководство.