我怎样才能使一个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的父变得简单。

Answer 2

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

var prev=false; 

//... 

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