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

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

var prev=false;

//...

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

Answer 2

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

您可以尝试保留句柄应该打开的div 这一刻。当一个新的div 选中，先隐藏已打开的div，然后打开新的div并分配目前打开处理到现在打开div。
点击时使其成为任何，它只是关闭所有divs没有无论如何，然后打开div 被选中了。
...

它的诀窍在于，通过将javascript应用于所有div的父级，使得所有这些技术都变得简单。

如何在点击时扩展div，一次只打开一个？

2 个答案: