여러 Twitter Bootstrap 활성화 요소 축소

Question

저는 비교적 JQuery에 익숙하지 않으므로 사소한 것처럼 보이는 경우이 질문에 대해 사과하십시오. 나는 세 개의 탭 요소가있는 HTML을 아래에서 설명하는 페이지를 가지고 있습니다. 각각의 탭 요소에는 불특정 다수의 접을 수있는 요소가있을 수 있습니다.

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

나는 파이썬 2.7과 더불어, 템플릿 엔진으로 프론트 엔드 프레임 워크와 Jinja2으로 트위터 부트 스트랩을 사용하고을 : 나는 서버에서 데이터를 전달하기 위해 '그룹'이라는 파이썬 사전을 사용하고, 그것은 다음과 같은 구조는이다 백엔드. 다음 코드를 사용하여 수행 할 수없는 작업은 접을 수있는 요소를 활성화하는 것입니다. 부트 스트랩 설명서에 제시된 것과 다른 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>