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