激活多個Twitter引導收起元素

我對JQuery比較新，所以請原諒這個問題，如果它看起來微不足道。我有一個頁面，如下面的HTML所概述的那樣，有三個標籤元素，其中每個標籤元素可以包含未指定數量的可摺疊元素。我使用所謂的「分組」 Python字典從服務器傳送數據，它的結構如下：激活多個Twitter引導收起元素

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

我使用Twitter的引導作爲一個前端框架和Jinja2的作爲模板引擎，與Python 2.7後端。我無法處理以下代碼是激活可摺疊元素。我猜測一些JQuery需要與Bootstrap文檔中提供的不同。我嘗試過列出的激活函數的各種排列組合，但由於我對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 -->

來源

2012-10-07 vrume21

我認爲問題出在你的id =「accordion2」和'data-parent'屬性上。它應該是唯一的ID（你應該預先/追加'{category}'）。你能否展示一些（或者只是一個）JS激活，你認爲最有可能是足夠的？ – Sherbrow

我對這個問題的理解是，每個手風琴定位標籤的href屬性需要唯一對應div類標籤的class id'class'accordion-body collapse in'。我試過使用Bootstrap文檔（$（'。collapse'）。collapse（））上描述的簡單手動激活。當我做到這一點時，標籤2和3上的可摺疊部分都可以工作，但是不能使用tab1上的可摺疊部分。在最初的問題中，我假設我需要專門針對每個可摺疊對象並使用JQuery激活它們，但我不確定這是否正確。 – vrume21

標準$('.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>

來源

2012-10-08 21:09:17 Sherbrow

感謝您的幫助。如果給定選項卡中的手風琴都具有相同的ID，您是否認爲這會有問題？這將是你提出的結果。我想唯一的選擇是使用ID附加的組[0]，但考慮到我的代碼的結構，我不知道我將如何完成此操作。 – vrume21

@ batmitchell54只有ID屬性必須是唯一的，'data-parent'應該在每個選項卡中相同，以便所有可見的摺疊元素在打開時關閉。 – Sherbrow

激活多個Twitter引導收起元素

回答

相關問題