Div는 슬라이드 타운이지만 슬라이드 업지는 아닙니다
문제
토글, 슬라이드 업 및 슬라이드 타운을 사용하여 일련의 DIV를 보여주고 숨기려고합니다. 나는 DIV를 슬라이드 타운으로 가져갈 수 있지만 슬라이드 업으로 가져갈 수는 없습니다. 나는이 스크립트를 사고없이 사용했기 때문에 이것이 왜 작동하지 않는지에 대해 정말로 혼란 스러웠습니다. 나는 내 대본과 내가 보여주고 숨기려고하는 Div를 포함시켰다.
빠른 참고 : "숨겨진 차량"DIV에 일반 구형 P 태그를 넣으면 제대로 작동했습니다. 그것은 예상대로 보여주고 숨어있었습니다. 그러나 테이블을 그 div에 다시 넣었을 때 작동하지 않았습니다.
<script type="text/javascript">
$(document).ready(function() {
$(".ShowVehicles").toggle(function() {
$(".HiddenVehicles").slideDown(2000);
$(this).text("Hide All");
}, function () {
$(".HiddenVehicles").slideUp(2000);
$(this).text("Show All");
});
});
<div class="HiddenVehicles" style="display:none; width:730px;">
(there will be a giant table in here)
</div>
해결책
이 조언을 의견으로 게시했으며 문제를 해결하는 데 도움이되었으므로 여기에 다시 게시하고 있습니다.
슬라이드 업/슬라이드 타운 애니메이션이 한 방향으로 만 작동하면 종종 포지셔닝 버그입니다. 당신이 애니메이션하는 요소 중 하나를 설정해야합니다. position:relative
또는 요소의 아이들은 a float
그들에게 적용되어 부모 요소에 진정한 높이를 제공하지 않습니다.
나는 추가하려고 노력할 것이다 float:none
테이블에. 그래도 작동하지 않으면 추가 해보십시오 position:relative
~로 div#HiddenVehicles
.
다른 팁
플로트/포지셔닝 문제가없는 사람들의 경우 jQuery 1.10에서 1.11에서 1.11에서 업그레이드가 문제를 해결한다는 것을 알았습니다.
제휴하지 않습니다 StackOverflow