1

如此处所示：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">二&lt;/span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=3"><span class="chapter">三&lt;/span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=4"><span class="chapter">四&lt;/span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=5"><span class="chapter">五&lt;/span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=6"><span class="chapter">六&lt;/span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=7"><span class="chapter">七&lt;/span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=8"><span class="chapter">八&lt;/span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=9"><span class="chapter">九&lt;/span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=10"><span class="chapter">十&lt;/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 已经打开，那么它会先关闭打开的章节，然后再为用户点击的章节设置动画。

4

2 回答 2

1

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

  1. 您可以尝试保留此时应打开的 div 的句柄。选中新div时，先隐藏打开的div，然后打开新的div，将当前打开的句柄分配给现在打开的div。
  2. 使它成为当您单击任何时，无论如何它都会关闭所有 div，然后只打开选定的 div。
  3. ...

诀窍在于，通过将您的 javascript 应用于所有 div 的父级，这些技术在被选中时应该表现出来，从而使几乎所有这些技术变得简单。

于 2010-05-18T04:14:00.047 回答
1

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

var prev=false;

//...

if(prev!==false)
    // close prev
prev = new_div;
于 2010-05-18T02:42:03.333 回答