조언/브레인 스토밍 재 작성 및 정리/축소 상자

Question

간단한 확장 및 축소 내용 상자 정리에 대한 조언을 요청하고 싶습니다. 필자는 몇 가지 아이디어를 얻는 데 약간의 시간을 할애하지만 html의 복잡성을 좋아하지 않으며 진정한 아약스를로드하는 것이 좋을 것이라고 생각합니다.

여기에서 확인하십시오 : http://jsfiddle.net/A9rKm/11/

그래서 향상시킬 수있는 기본적인 아이디어는 : 그것은 확장로드

2 개 상태를 가진 클릭에

• 하면, 축소 된 상자를 가지고 , 1 개를 접은 다음 1 개를 펼치고 div 사이의 div를 삭제합니다 (접힌 div의 확장 된 div)
• 내용의 확장 토글로드에서 true ajax * 실제로 축소 된 div 내부의 확장 된 div를 제거하려는 사람은 어떻게 수행 할 수 있는지 알고 있습니까? 고마워!

확장 상태에 대한 내용 만로드하여 HTML을 정리하고 페이지 내 HTML을 줄 이도록하는 방법에 대한 아이디어가 있습니까?

업데이트 : 내가 아는 바가없는이 Accordion 플러그인으로이 작업을 수행 할 수 있습니다. 그러나 나는 차라리이 질문

UPDATE2을 닫습니다 안 내 의견으로는 그 때문에 처음부터이 일을 코딩하는 방법 : 사람이 작성하는 방법을 살펴보고 배울 특정 아코디언 플러그인을 추천?

Answer 1

당신이 그것을하는 법을 배우고 싶어하는 것처럼 보였으므로, 나는 플러그인을 무시하고 그것을 떠나는 것을 추천하지 않을 것입니다. 때로는 어떻게 작동하는지 이해하는 것이 좋습니다. 기본 단계는 다음과 같습니다.

1. 컨트롤에 대한 의미 론적 마크 업을 결정하십시오. 즉 모든 주를 확장하고 CSS를 사용 중지 한 경우 어떻게 보입니까?

2. 모든 항목이 접힌 상태로 시작하십시오. CSS 규칙은 visibility : hidden, display : none 또는 height : 0 또는 조합을 사용하여로드되는 동안 사용자의 내부 내용을 숨 깁니다.

3. jQuery .click()을 사용하여 항목을 클릭하십시오. 이 이벤트 핸들러에서 jQuery의 .ajax()을 사용하여 JSON, HTML 페이지 또는 기타와 같은 관련 아약스 결과를 호출해야합니다.

4. ajax 호출의 성공 이벤트 처리기에서 결과를 항목의 내용에 추가해야합니다.

5. 애니메이션 전체 높이 항목의 내용과 다음에 퇴색.

6. 을 두 번째 클릭에, 당신은 반대를 할 것, 그리고 애니메이션이 완료되면 당신은 내용을 숨기거나 제거 할 수 있습니다. 같은 데이터를 다시 가져올 필요가 없도록 숨기는 것이 좋습니다.모든 브라우저에서

7. 테스트를 상상할 수있는, 이런 종류의 기능은 특히 IE

Answer 2

나는 그것이 :) 들으는 지금 큰 작업 한 시간 해킹을 추가하고 연구에 의해 고정되었다에서, 잘못 종종 있습니다 제안을 위해.