引导手风琴崩溃-一个标签工作，一个没有

Question

我有一个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>

Answer 1

这是因为您有相同的ID和数据-在选项卡2中的可折叠项与在选项卡1中相同。这些肯定是独一无二的。例如

请参阅代码已修复的此自举