간단 확장/축소 divs> JQuery?

애플리케이션에서 일련의 상위 컨테이너 div에 accordian 스타일의 확장/축소 핸들을 추가해야합니다. jquery와 같은 라이브러리에 너무 단순한가?간단 확장/축소 divs> JQuery?

예 :

<div class="handleDiv"> expand | collapse 
    <div>child element</div> 
    <div>child element</div> 
</div> 

<div class="handleDiv"> expand | collapse 
    <div>child element</div> 
    <div>child element</div> 
</div>

출처

2010-03-13 Scott B

http://docs.jquery.com/UI/Accordion –

돌에서 설정이 마크 업인가를 참조하거나 관리 권한을해야합니까? 예 : 컨테이너 div에 자식 요소를 래핑 할 수 있습니까? –

@ 닉 : 나는 그것을 완벽하게 통제 할 수있다. –

이 같은 것을보십시오 :

$('.handleDiv').click(function() { 
    $(this).children().toggle(); 
});

즉, 확장하거나 당신이 그들을 클릭 할 때마다 "handleDiv"의 내용을 숨길 수 있습니다. 나는 그 "펼치기"항목을 링크로 만들고 클릭 핸들러를 붙여서 제안 할 것입니다. 그래야 div의 아무 곳이나 클릭해도 전환되지 않습니다.

당신이 그 (것)들을 폐쇄 밖으로 시작하려면, 그들이 당신의 스타일에 폐쇄 중 스타일 : 내 대답의 시작 부분에

.handleDiv div { 
    display: none; 
}

또는이 추가 ".hide()"를 JQuery와 조각의 끝 .

출처

2010-03-13 20:26:31 bhollis

CSS에서 .handleDiv div를 사용하고 싶습니다. –

죄송합니다! 그것을 놓쳤습니다. – bhollis

방금 플러그인을 작성했습니다.

는 http://sylvain-hamel.github.io/simple-expand/

출처

2012-06-15 01:59:38 Sylvain

이 플러그인은 우수하지만 초보자는 ''은 페이지 하단 (''태그 바로 앞에)에 넣어야합니다. –

플러그인이 도움이 되었기 때문에 기쁩니다. 원하는 곳에이 스크립트 태그를 넣을 수 있습니다. 그러나 호출이 jQuery'DOM ready' 콜백에 싸여 있는지 확인하십시오 :''. 이것은 jQuery와 관련된 거의 모든 경우의 경우입니다. – Sylvain

실뱅 (Sylvain)은 정확 합니다만, 멍청한 놈처럼 나는 등 다양한 위치에 있으며 머리 부분은 나를 위해 일한 유일한 시간입니다. (예 : 제 경우에는 레일스 부분에 넣는 것이 효과가 없었습니다) – Ben

간단 확장/축소 divs> JQuery?

답변

관련 문제