如这里所示: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&ch=1"><span class="chapter">一</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=2"><span class="chapter">二</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=3"><span class="chapter">三</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=4"><span class="chapter">四</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=5"><span class="chapter">五</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=6"><span class="chapter">六</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=7"><span class="chapter">七</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=8"><span class="chapter">八</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=9"><span class="chapter">九</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=10"><span class="chapter">十</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=11"><span class="chapter">十一</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=12"><span class="chapter">十二</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&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 已经打开,那么它会先关闭打开的,然后再为用户点击的那个设置动画。
最佳答案
从概念上讲,有几种明显的方法可以实现这一目标。
- 你可以尝试保持对 应该打开的div 这一刻。当一个新的 div 是 选中,首先隐藏打开的div, 然后打开新的 div 并分配 当前打开句柄到现在 打开分区。
- 让它在你点击 任何,它只是关闭所有 div 否 不管怎样,然后只打开 div 被选中。
- ...
它的诀窍在于,通过将您的 javascript 应用到所有 div 的父级,这些技术在被选中时应该表现得非常简单。
关于javascript - 我怎样才能让一个div在点击时展开,一次只打开一个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2854231/