Question

我对JQuery比较陌生，所以如果这个问题看似微不足道，请原谅这个问题。我有一个页面，如下面的HTML所示，有三个制表符元素，每个元素可能有一个未指定数量的可折叠元素。我使用一个名为'groupings'的python字典从服务器传递数据，它的结构如下：

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

我使用Twitter Bootstrap作为前端框架，使用Jinja2作为模板引擎，后端使用Python 2.7。我无法使用以下代码激活可折叠元素。我猜测需要一些与Bootstrap文档中提供的JQuery不同的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)所示，它有效。

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

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

激活多个Twitter Bootstrap折叠元素

1 个答案: