我有一个Twitter引导手风琴布局，有两个相邻的窗格。 DayOne中的事件动画很好，在DayTwo没有。 javascript控制台在两个窗格中注册折叠操作，但DayTwo事件不会滑动。
我怀疑它很简单，但我感到很茫然。谢谢你的帮助！
<section class="nav-tabs-default hidden-xs">
<!-- Parent Nav Tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#DayOne" data-toggle="tab">
<div class="title">Day 1</div>
<div class="subtitle">06/10/2015</div>
</a></li>
<li><a href="#DayTwo" data-toggle="tab">
<div class="title">Day 2</div>
<div class="subtitle">06/11/2015</div>
</a></li>
</ul>
<!-- Parent Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="DayOne">
<!-- Child 1 Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="DayOne-1">
<div class="panel-group timeline-schedule" id="panelTimelineOne">
<div class="panel panel-default">
<div class="speaker-wrapper">
<img src="assets/img/speaker/speaker-1.jpg" class="img-responsive img-circle" alt="speaker-1" />
</div>
<div class="panel-heading">
<div class="panel-title">
<div class="time"><i class="fa fa-clock-o"></i> 2:00 PM</div>
<a data-toggle="collapse" data-parent="#panelTimelineOne" href="#itemOne">
Title event 1
<div class="pull-right fa fa-angle-up"></div>
<div class="pull-right fa fa-angle-down"></div>
</a>
</div>
</div>
<div id="itemOne" class="panel-collapse collapse in">
<div class="panel-body">
<article>
<p>Info event 1</p>
</article>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="speaker-wrapper">
<img src="assets/img/speaker/speaker-2.jpg" class="img-responsive img-circle" alt="speaker-2" />
</div>
<div class="panel-heading">
<div class="panel-title">
<div class="time"><i class="fa fa-clock-o"></i> 5:40 PM</div>
<a data-toggle="collapse" data-parent="#panelTimelineOne" href="#itemTwo" class="collapsed">
Title event 2
<div class="pull-right fa fa-angle-up"></div>
<div class="pull-right fa fa-angle-down"></div>
</a>
</div>
</div>
<div id="itemTwo" class="panel-collapse collapse">
<div class="panel-body">
<article>
<p>Info event 2</p>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="tab-pane fade" id="DayTwo">
<!-- Child 2 Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="DayTwo-1">
<div class="panel-group timeline-schedule" id="panelTimelineOne">
<div class="panel panel-default">
<div class="speaker-wrapper">
<img src="assets/img/speaker/speaker-1.jpg" class="img-responsive img-circle" alt="speaker-1" />
</div>
<div class="panel-heading">
<div class="panel-title">
<div class="time"><i class="fa fa-clock-o"></i> 11:00 AM</div>
<a data-toggle="collapse" data-parent="#panelTimelineOne" href="#itemOne">
Title event 3
<div class="pull-right fa fa-angle-up"></div>
<div class="pull-right fa fa-angle-down"></div>
</a>
</div>
</div>
<div id="itemOne" class="panel-collapse collapse in">
<div class="panel-body">
<article>
<p>Info event 3</p>
</article>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="speaker-wrapper">
<img src="assets/img/speaker/speaker-2.jpg" class="img-responsive img-circle" alt="speaker-2" />
</div>
<div class="panel-heading">
<div class="panel-title">
<div class="time"><i class="fa fa-clock-o"></i> 3:00 PM</div>
<a data-toggle="collapse" data-parent="#panelTimelineOne" href="#itemTwo" class="collapsed">
Title event 4
<div class="pull-right fa fa-angle-up"></div>
<div class="pull-right fa fa-angle-down"></div>
</a>
</div>
</div>
<div id="itemTwo" class="panel-collapse collapse">
<div class="panel-body">
<article>
<p>Info event 4</p>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</section>
答案 0 :(得分：0)
这是因为您在标签2中具有与标签1中相同的ID和数据父项可折叠项目。这些必须是独特的。例如 - href="#itemOne"位于第一个和第二个标签中第一个项目的切换位置。
在修复代码的情况下查看this bootply