引导手风琴折叠 - 一个选项卡有效，一个不工作

Question

我有一个带有两个相邻窗格的Twitter引导手风琴布局。第一天的事件动画很好，第二天则不然。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

这是因为您在选项卡 2 中具有与选项卡 1 中相同的 ID 和数据父项。这些必须是唯一的。例如 -- href="#itemOne" 在选项卡 1 和 2 中第一项的切换开关上。

看到这个引导你的代码修复了