javascript - 我怎样才能让一个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 已经打开，那么它会先关闭打开的，然后再为用户点击的那个设置动画。

Answer 1

从概念上讲，有几种明显的方法可以实现这一目标。

1. 你可以尝试保持对应该打开的div这一刻。当一个新的 div 是选中，首先隐藏打开的div，然后打开新的 div 并分配当前打开句柄到现在打开分区。
2. 让它在你点击任何，它只是关闭所有 div 否不管怎样，然后只打开 div被选中。
3. ...

它的诀窍在于，通过将您的 javascript 应用到所有 div 的父级，这些技术在被选中时应该表现得非常简单。