한 번에 하나만 열어 클릭 할 때 div를 확장하려면 어떻게해야합니까?

Question

여기에 표시된대로 : http://www.learningjquery.com/2007/03/accordion-madness. 하지만 내 상황에 맞게 작동하도록 편집하는 데 도움이 필요합니다.

샘플 HTML

<div class="row even"> 
<div class="info"> 
    <div class="class">CK1</div> 
    <div class="teacher_chinese">老師</div> 
    <div class="teacher_english">Teacher Name</div> 
    <div class="assistant_chinese">助教</div> 
    <div class="assistant_english">Assistant Name</div> 
    <div class="room">Room 00</div> 
    <div class="book"></div> 
</div> 
<div class="chapters"> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=1"><span class="chapter">一</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=2"><span class="chapter">二</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=3"><span class="chapter">三</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=4"><span class="chapter">四</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=5"><span class="chapter">五</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=6"><span class="chapter">六</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=7"><span class="chapter">七</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=8"><span class="chapter">八</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=9"><span class="chapter">九</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=10"><span class="chapter">十</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=11"><span class="chapter">十一</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=12"><span class="chapter">十二</span></a> 
    <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=13"><span class="chapter">十三</span></a> 
</div> 
</div> 

JQUERY [진행중인 작업]

$(document).ready(function() { 
$('div#table_cantonese .chapters').hide(); 
$('div#table_cantonese .book').click(function() { 
    var $nextDiv = $(this).next(); 
    var $visibleSiblings = $nextDiv.siblings('div:visible'); 
    if ($visibleSiblings.length) { 
    $visibleSiblings.slideUp('fast', function() { 
     $nextDiv.slideToggle('fast'); 
    }); 
    } else { 
    $nextDiv.slideToggle('fast'); 
    } 
}); 
}); 

div.book에 대한 최종 사용자의 클릭이, div.chapters가 확장됩니다 그래서. 한 번에 하나의 div.chapters 만 표시됩니다. 따라서 div.chapters가 이미 열려 있으면 사용자가 클릭 한 애니메이션을 만들기 전에 먼저 열려있는 div.chapters를 닫습니다.

Answer 1

개념적으로이를 달성하기위한 몇 가지 확실한 방법이 있습니다.

1. 당신은 에 이 순간에서 열려야 사업부를 핸들을 유지하는 시도 할 수 있습니다. 새 div가 으로 선택되면 열린 div를 으로 숨기고 새 div를 열고 현재 열린 핸들을 열린 div에 할당하십시오.
2. 을 클릭하면 div의 모든 div가 닫히고 div이 열립니다. 그것에
3. ...

트릭은 거의 모든 기술이 선택하면 행동해야 모든 div의의 부모에 자바 스크립트를 적용하여 간단하게 만든 것입니다.

Answer 2

이전에 열린 DIV를 저장하기 위해 전역 변수를 사용하십시오. 그런 다음 새 DIV가 열리면 이전에 열린 DIV를 닫습니다.

var prev=false; 

//... 

if(prev!==false) 
    // close prev 
prev = new_div;