Jquery Question slideToggle과의 답변

Question

간단한 질문 및 답변 페이지가 있습니다. 사용자가 질문을 클릭하면 slideToggle()에 응답이 표시됩니다.

이것은 매우 사소한 일이지만 Chrome, Safari 및 Opera에 붙어 있지만 Firefox에서 Gecko가 Webkit 및 Firefox에서 실행하는 첫 번째 세 가지 작업에 대해 설명 할 수 있습니다. 나는 언급 한 브라우저의 모든 최신 버전을 사용한다. 코드는 이것이다

...

(function() { 
    $('.answer-list').addClass('answer-list-display'); 
    $('.question button').click(function() { 
     $(this).next().slideToggle(300); 
    }); 
}()) 

그것은 아주 사소한과 작동하도록되어있다.

a similar answer (실제로는 광산과 동일)하지만 visibility:hidden을 사용하면 질문 사이에 간격이 생기는 답변의 높이가 유지됩니다. 나는 또한 height과 animation() 함수를 제어하려고했지만 여전히 성공하지 못했다.

모든 Webkit 브라우저가 처음으로 대답을 표시합니다. 그러나 다른 모든 시간에 나는 답을보기 위해 세 번 (!) 번 질문을 클릭해야합니다.

나는 이것이 사소한 질문이지만 실제로이 일을하려고하는 내 삶의 4 시간을 보냈으며, 거의 잠을 자지 못했으며 정말 실망 스럽다.

이전에 읽은 책에서 나온 예제 인 Jquery The Missing Manual은 인수로 두 가지 기능을 가진 toggle() 메서드를 사용합니다. 여전히 Webkit 브라우저에서 동일한 문제로 작동하지 않았습니다.

모든 답변 주셔서 감사합니다.

Answer 1

확인. 여기에 답이 있습니다.

내 옆에있는 마크 업 실수였습니다. 정렬되지 않은 목록을 사용했습니다. 모든 질문은 li이고 button은 li입니다. 대답은 순서가없는 내부 목록에있었습니다. 사용자가 버튼을 클릭하면 내부 목록이 표시됩니다. 그것은 작동하지 않았다.

다음 질문에 대해서는 div 및 p으로, 질문에 대해서는 button으로 전환했습니다. 모두 잘 작동합니다.

오늘의 팁 : slideToggle, fadeToggle(), toggle() 또는 Jquery가있는 다른 애니메이션과 함께 모든 종류의 목록을 사용하지 마십시오. 그것은 Jquery가 그들을 계산하기에는 너무 복잡하고 나는 그것을 모두 시도한 것 같습니다. 대부분. 누가 알 겠어 ...