Как избежать того, чтобы JQuery toggle() в div макета вызывал перемещение вашего макета?

StackOverflow https://stackoverflow.com/questions/1093990

  •  11-09-2019
  •  | 
  •  

Вопрос

У меня есть функция 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-индексом, что исключит его из потока документов.Это то, что обычно используют модальные окна/лайтбоксы.Вот руководство.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top