레이아웃 DIV에서 jQuery toggle ()가 레이아웃이 움직이게되는 것을 어떻게 피합니까?
문제
레이아웃에서 DIV 중 하나를 토글하는 jQuery 기능이 있습니다. 문제는 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로 프로그래밍 방식으로 설정할 수 있습니다. 접을 수있는 div의 .width () 및 .height () 값을 가져 와서 외부 div의 CSS에 적용하십시오.
다른 팁
가시성을 사용하는 새로운 기능을 작성해보십시오 : 디스플레이 대신 숨겨져 있습니다 : 없음. DIV를 표시하지 않고 CSS 상자 (및 레이아웃)를 유지합니다.
Jonathan Sampson의 답변은 작동합니다. 또는 정확히 무엇을하고 있는지 알지 못하고 (마크 업 및 필요한 효과) 높은 z- 인덱스와 함께 절대 포지셔닝을 사용하여 문서 흐름에서 벗어날 수 있습니다. 이것은 Modal Windows / Lightbox가 일반적으로 사용하는 것입니다. 여기에 있습니다 지도 시간.
제휴하지 않습니다 StackOverflow