1

我对 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 -->
4

1 回答 1

4

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

正如在这个演示 (jsfiddle)中看到的，它可以工作。

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

<div class="accordion" id="accordion_{{category}}">
  <!-- ... -->
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_{{category}}" href="#{{group[0]}}">...</a>
  <!-- ... -->
</div>
于 2012-10-08T21:09:17.043 回答