jquery 섹션의 간단한 슬라이드 토글

Question

질문과 대답이있는 간단한 페이지를 만들고 있습니다. 이 보이는 방법입니다

제> 질문>

대답 그리고 이것은 다른 섹션으로 반복 계속해서, 각 섹션은 여러 질문이 각 질문에 대한 답변이 있습니다. 기본적으로 모든 것은 display : none으로 설정됩니다. 이제 누군가가 섹션 중 하나를 클릭하면 관련 질문 세트가 나타나야하며 누군가가 질문을 클릭하면 답이 표시됩니다.

한 번에 하나의 섹션 만 열어야합니다.

내가 가지가 부모(), 자녀(), 각() 함수를 필요로하지만 방법과 장소들을 :(

를 사용하려면 내가 이전에 사용 된 자바 스크립트와 어떻게 사용하고 모르는 생각

그것은 ID 기반을 통해,하지만 난 jQuery를 사용하고 있기 때문에, 나는 .section, .question 및 .answer 같은 클래스를 사용하여 페이지를 다시 작성 줄 알았는데

다음은 내가 li 요소를 만든 간단한 바이올린 페이지입니다. http://jsfiddle.net/DKMJH/2/

Answer 1

HTML이 유효하지 않으므로 <li> 요소가 중첩되어 있지 않으므로 브라우저가 문제를 해결하려고 시도 할 것이고 다음 질문이나 답변을 원하는 셀렉터의 종류는 브라우저가 HTML을 변경하는 방법에 따라 다릅니다. . 우리는 최종 구조가 정말 무엇인지 알 수 이제 우리는 유효한 HTML을 가지고

<ul> 
    <li class="section">Section One</li> 
    <li class="question">This is a question</li> 
    <li class="answer">This is an answer</li> 
    <li class="section">Section Two</li> 
    <li class="question">This is another question</li> 
    <li class="answer">This is another answer</li> 
</ul> 

당신은 열 적절한 단일 요소를 찾기 위해 next를 사용할 수 있습니다 : 당신은 아마이 HTML을 원하는

$('.section').click(function() { 
    $(this).next('.question').slideToggle(500); 
}); 
$('.question').click(function() { 
    $(this).next('.answer').slideToggle(500); 
}); 

CSS에서 cursor의 철자를 틀었지만 jQuery에 아무런 영향을 미치지 않습니다.

수정 바이올린 : http://jsfiddle.net/ambiguous/jcnMa/

ryudice 처음에 있었고, 문제의 핵심에 도착, 나는 그냥 깨진 HTML의 문제점을 해결하기위한 주석보다 더 많은 공간을 필요로했다. next을 사용하면 브라우저가 HTML을 하나의 정렬되지 않은 목록으로 재구성하기 때문에 작동합니다.

당신이 한 번에 열려있는 하나 개의 질문을 원한다면, 다른 사람 닫습니다

$('.section').click(function() { 
    var $others = $('.question:visible').not(this); 
    $others.next('.answer').hide(); 
    $others.slideToggle(500); 
    $(this).next('.question').slideToggle(500); 
}); 

데모 : http://jsfiddle.net/ambiguous/jcnMa/1/

Answer 2

여기에 있습니다 :

$('.question, .answer').css("display","none"); 
$('.section').click(function(){ 
    $(this).next('.question').slideToggle(500); 
}); 
$('.question').click(function(){ 
    $(this).next('.answer').slideToggle(500); 
}); 

Answer 3

내가 당신이 원하는이 깔끔한 모양을 생각 : -

$('.question, .answer').css("display", "none"); 

$('.section').click(function() { 
    $(this).nextUntil('.section', '.question, .answer:visible').slideToggle(500);  
}); 

$('.question').click(function() { 
    $(this).next('.answer').slideToggle(500); 
});