Jquery 토글() Safari 문제

Question

Safari 브라우저에만있는 이상한 문제가 있습니다. 내 DOM은 매우 복잡합니다. Jsfiddle을 만들려고했지만 모든 것을 엉망으로 만들었습니다. 가능한 경우 누군가에게 내 웹 사이트에 로그인하도록 요청하고 싶습니다. 나는 매우 감사하게 될 것입니다.

링크 : http://www.Lynxapp.io

아이디 : demo@demo.com

비밀번호 : 데모

후도 크롬, 오페라 또는 최신의 '시험 주제 1'또는 '시험 제목이'를 클릭 IE, 어린이 요소 toggle() 멋지게. Safari에서는 토글도되지만 DOM은 어떤 이유로 든 '아래로 이동하지 않습니다. 즉, 하위 요소 만 표시되지만 아래쪽 요소는 아래로 미끄러지지 않습니다.

이

는 요소 전환 코드입니다 :

$(".small").children(".topics").hide() 


$(".small").click(function() { 
    $(this).children(".topics").toggle("slide", {direction: "up"}); 
}); 

내가이 간단한 문제가 있음을 알고,하지만 난이 기능이 다른 완벽하게 작동하기 때문에 어디에 내가에서 디버깅을 시작해야 모르는 브라우저 (Safari 제외).

그리고 Jsfiddle을 만들지 않아서 미안하지만, DOM이 다소 엉망이되어서 Jsfiddle에서 좋은 예제를 만드는 데 실패했습니다.

Answer 1

Safari는 상위 (이 경우 .small 인 버튼)의 높이를 40 픽셀로 간주합니다. 그래서 이들 중에서 열어 놓은 것을 토글하면 40px 이상으로 부모를 키우는 것이 아닙니다. 따라서 부모 컨테이너 .subject은 크기가 증가하지 않습니다. 무슨 뜻인지 확인하려면이에 .small 대한 CSS를 변경 :

이

.small{ 
    width: 90%; 
    height: auto; 
    margin-top: .5em; 
} 

이 당신이 찾고있는 매우 효과가 아니라이 Safari에서 작동하도록 할 수 밖에 .topics 된 div를 이동하는 것을 고려해야 할 수도 있습니다 버튼의 .small 버튼을 클릭하면 형제가됩니다. 이 같은

뭔가 :

<div class="custom_button white small"></div> 
<div class="topics"></div> 
<div class="custom_button white small"></div> 
<div class="topics"></div> 

그리고 당신의 jQuery를 : 그래서 요즘 응답에 대한

$(".small").next(".topics").hide() 

$(".small").click(function() { 
    $(this).next(".topics").toggle("slide", {direction: "up"}); 
});