확장 가능한 버튼을 보관하기 위해 컨테이너로 사용하는 일부 중첩 된 DIV 요소가있는 설계 사이트가 있습니다.
사용자가 버튼을 클릭하면 확장되어 더 많은 콘텐츠가 노출됩니다.
DIV가 부모 DIV 안에 있고 그 속성이 "none"으로 설정 될 때까지 모든 것이 잘 작동합니다.
강제로 jQuery .slideUp() 메소드를 사용하여 디스플레이에 있는지 여부에 관계없이 확장 가능한 버튼을 최소화 할 수 있습니까?
또는 $ .slideDown()이 디스플레이에 설정된 요소에서 제대로 작동하도록 설정해야하는 속성/속성 : 없음 parent DIV?
에 디스플레이 속성을 설정할 수 있었다 값을 "없음"으로 설정하십시오.
이렇게하면 .slideDown() 메서드를 적용하면 .slideUp() 메서드를 사용하여 요소가 이미 숨겨져 있다고 생각할 수 있습니다.
부모가 display:none; 인 경우 슬라이드 업을 시도하기 전에 표시해야합니다. show 기능을 사용하여이 작업을 수행 할 수 있습니다. 주석 당
$(divToSlide).parent().show();
$(divToSlide).slideUp();
$(divToSlide).parent().css("display", "block");
$(divToSlide).slideUp();
실제로 더 쉬운 방법은 단순히 요소의 CSS 표시 속성을 "none"으로 변경하는 것입니다. 이렇게하면 더 많은 요소를 처리해야하는 시스템 오버 헤드를 피할 수 있습니다. – henkojinko
@henkojinko - 충분히 공정하지만 정교하게 설명해 주시겠습니까? 나는 단지 전시와 가시성을 설정 한 것을 보여 주었다. 그것은 그 이상을 수행합니까? –
그들은 그렇다. 그러나 먼저 slideUp을 사용하지 않고도 slideDown을 사용하여 특정 요소를 올바르게 실행하려면 표시 속성을 "none"으로 설정하기 만하면됩니다. 그렇게하면 중첩 된 조상이 숨겨져 있거나 차단되어 있거나 전혀 존재하지 않는다는 것에 대해 걱정할 필요가 없습니다. – henkojinko
정확히 동일한 문제가있어서 언급 한 솔루션 중 아무 것도 예상대로 작동하지 않았습니다. show() 함수를 적용 할 때 slideUp/slideDown 애니메이션 자체가 손실되기도합니다. 내 마지막 해결책은 스타일을 직접 적용하기 위해 콜백 함수를 사용하는 것이었다.
$(divToSlide).slideUp(delay, function() {
// When animation ends
$(this).css('display', 'none');
});
이렇게하면 애니메이션을 잃지 않고 동일한 결과를 얻을 수있다.
나는 이것을 시도 할 것이다! – exoboy
이것은 위대한 일이었고, 엘리먼트 자체와 그 부모가 아닌 CSS를 변경해야했습니다. 감사! – exoboy
+1 OP의 문제점을 내가 이해했던 것보다 잘 이해하고 있습니다. –