如何使 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并将当前打开的手柄分配给现在打开的Div。
2. 这样做，以便当您单击任何一个时，无论如何它都会关闭所有div，然后仅打开选择的DIV。
3. ...

其技巧在于，通过将 javascript 应用到所有在选择时应表现的 div 的父级，几乎所有这些技术都变得简单。

Answer 2

使用一个全局变量来存储先前打开DIV。然后，当一个新的DIV被打开，关闭先前打开的一个。

var prev=false;

//...

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