Wie kann ich ein div mit nur einer nach dem anderen geöffnet Klick erweitern machen?

Question

Wie hier gezeigt: http://www.learningjquery.com/2007/ 03 / Akkordeon-Wahnsinn . Aber ich brauche Hilfe zu bearbeiten, so dass es für meine Verhältnisse funktionieren wird.

Beispiel-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 [Work In Progress]

$(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');
  }
}); 
});

Also, wenn der Endbenutzer Klick auf div.book wird div.chapters erweitern. Und nur eine div.chapters wird zu einem Zeitpunkt angezeigt. Wenn also ein div.chapters bereits geöffnet ist, dann wird es das offen man zuerst schließen, bevor der einen der Benutzer angeklickt Animieren.

Answer 1

Konzeptionell gibt es ein paar offensichtlichen Wege, dies zu erreichen.

1. Sie könnten versuchen, einen Griff halten zu die div, die an geöffnet werden soll in diesem Moment. Wenn ein neues div ausgewählt, zuerst verstecken die geöffnete div, Öffnen Sie dann den neuen div und weisen die aktuell geöffneter Griff in die jetzt geöffnet div.
2. Machen Sie es so, dass, wenn Sie auf jeder, schließt er einfach alle divs nicht egal was, dann nur die div öffnet , die ausgewählt wurde.
3. ...

Der Trick, um es ist, dass fast alle diese Techniken einfach gemacht werden von Ihrem Javascript an die Mutter aller divs Anwendung, die sich verhalten soll, wenn ausgewählt.

Answer 2

Verwenden Sie eine globale Variable, die zuvor geöffnete DIV zu speichern. Dann, wenn ein neues DIV geöffnet wird, in der Nähe der zuvor geöffneten ein.

var prev=false;

//...

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