1

私はJQueryに比較的慣れていないので、この質問が些細なことであると思われる場合はご容赦ください。以下の HTML で概説されているように、3 つのタブ要素を持つページがあり、それぞれのタブ要素には指定されていない数の折りたたみ可能な要素が含まれている可能性があります。サーバーからデータを渡すために「グループ化」と呼ばれるPython辞書を使用しています。その構造は次のとおりです。

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

フロントエンド フレームワークとして Twitter Bootstrap を使用し、バックエンドで Python 2.7 を使用して、Jinja2 をテンプレート エンジンとして使用しています。次のコードでできないことは、折りたたみ可能な要素を有効にすることです。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)に見られるように、動作します。

予期しない動作を引き起こす可能性があることが 1 つあります。それは、アコーディオン 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 に答える