jquery - 激活多个 Twitter Bootstrap 折叠元素

Question

我对 JQuery 比较陌生，所以如果这个问题看起来微不足道，请原谅。我有一个页面，如下面的 HTML 所示，包含三个选项卡元素，每个选项卡元素中可能包含未指定数量的可折叠元素。我使用一个名为“groupings”的Python字典来从服务器传递数据，它的结构如下:

groupings = {tab1: [[group, [(key, value), ...]], ...], ...}

我使用 Twitter Bootstrap 作为前端框架，使用 Jinja2 作为模板引擎，后端使用 Python 2.7。我无法使用以下代码激活可折叠元素。我猜测需要一些与 Bootstrap 文档中提供的不同的 JQuery。我已经尝试了那里列出的激活函数的各种排列，但由于我还不太熟悉 JQuery 的使用，所以没有成功。如有任何帮助，我们将不胜感激。

      <section id="tabs">
        <div class="page-header">
          <h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
        </div>
        <div class="row">
          <div class="span9 columns">
            <ul id="myTab" class="nav nav-tabs">
              <li class="active"><a href="#tab1" data-toggle="tab">tab1 title</a></li> 
              <li><a href="#tab2" data-toggle="tab">tab2 title</a></li> 
              <li><a href="#tab3" data-toggle="tab">tab3 title</a></li> 
            </ul>
          <div id="myTabContent" class="tab-content">
          {% for category in ['tab1', 'tab2', 'tab3'] %}
            {% if category == 'tab1' %}
              <div class="tab-pane fade in active" id="{{category}}">  
            {% else %}
              <div class="tab-pane fade" id="{{category}}">  
            {% endif %}
                <div class="span8">
                  <div class="accordion" id="accordion2">
                    {% for group in groupings[category] %}
                    <div class="accordion-group">
                      <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#{{group[0]}}">
                          {{group[0]}}
                        </a>
                      </div>
                      <div id="{{group[0]}}" class="accordion-body collapse in">
                        <div class="accordion-inner">
                          {% for key, value in group[1] %}
                            <dl class="dl-horizontal">
                              <dt>{{key}}:</dt>
                              <dd>{{value}}</dd>
                            </dl>
                          {% endfor %}
                        </div>
                      </div>  <!-- .accordion body collapse in -->
                    </div>
                  {% endfor %}
                </div>       <!--  .accordion -->                
              </div>   
            </div>
            {% endfor %}
          </div>    <!-- .tab content -->
        </div>
      </div>   <!-- row -->
    </section>   <!-- tabs -->

Answer 1

标准的 $('.collapse').collapse(); 折叠激活适用于您的情况，但您已经在使用 data-toggle="collapse"。您不应该同时使用两者。

如this demo (jsfiddle)中所示，它有效。

有一件事可能会导致意外行为: Accordion ID 不是唯一的。循环中的任何 ID 元素都应该是唯一的:

<div class="accordion" id="accordion_{{category}}">
  <!-- ... -->
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_{{category}}" href="#{{group[0]}}">...</a>
  <!-- ... -->
</div>