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が展開されます。また、一度に1つのdiv.chaptersのみが表示されます。したがって、div.chaptersがすでに開いている場合は、ユーザーがクリックしたものをアニメーション化する前に、開いているものを最初に閉じます。

4

2 に答える 2

1

グローバル変数を使用して、以前に開いたDIVを格納します。次に、新しいDIVが開いたら、前に開いたDIVを閉じます。

var prev=false;

//...

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

概念的には、これを達成するためのいくつかの明白な方法があります。

  1. この瞬間に開く必要があるdivへのハンドルを保持してみることができます。新しいdivを選択したら、最初に開いているdivを非表示にしてから、新しいdivを開き、現在開いているハンドルを現在開いているdivに割り当てます。
  2. いずれかをクリックすると、何があってもすべてのdivが閉じてから、選択したdivだけが開くようにします。
  3. ..。

その秘訣は、選択したときに動作するはずのすべてのdivの親にJavaScriptを適用することで、これらのテクニックのほぼすべてが単純になることです。

于 2010-05-18T04:14:00.047 に答える