문제

토글, 슬라이드 업 및 슬라이드 타운을 사용하여 일련의 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에서 업그레이드가 문제를 해결한다는 것을 알았습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top