두 가지 수준의 처음

Question

위해 나는 다음과 같은 코드를 올바른 ID와 부모 ID로 아코디언의 두 가지 수준이 있다는 것을

<g:each in="${elementGroups}"> 
      <div class="accordion" id="accordion${it.id}"> 
       <!-- Element Group Heading --> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion${it.id}" href="#collapse${it.id}"> 
        <b>${it.name}</b> 
        </a> 
       </div> 
       <!-- Elements --> 
       <div id="collapse${it.id}" class="accordion-body collapse"> 
        <g:each var="element" in="${it.elements}"> 
         <!-- --> 
         <div class="accordion" id="accordion${it.id}-${element.id}"> 
          <div class="accordion-heading" style="margin-left: 30px"> 
           <label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion${it.id}-${element.id}" data-target="#collapseOne${it.id}-${element.id}"> 
           <input type="radio" name="optionsCheckboxList" value="${element.id}"/>${element.name} 
           </label> 
          </div> 
          <div id="collapseOne${it.id}-${element.id}" class="accordion-body collapse"> 
          <div class="accordion-inner" style="margin-left: 60px"> 

          <!-- Sample Description --> 
          <g:each var="desc1" in="${element.descriptions}"> 
           <input type="radio" name="selComment" value="${desc1.name}" onclick="populateComment(this.value)"/>${desc1.name}<br/> 
          </g:each> 
          </div></div> 
         </div> 
         <!-- --> 
        </g:each> 
       </div> 
      </div> 
     </g:each> 

주를 제외하고는 작동하지 않습니다. 그들은 모두 처음으로 확장됩니다. 일단 내가 뭔가를 바꿀 때, 아코디언은 더 이상 확장되지 않습니다. 무엇이 문제 일 수 있습니다.

Answer 1

accordion-heading 및 accordion-body 주위에 <div class="accordion-group">가 누락되었습니다. 이로 인해 문제가 발생할 수 있습니다. http://twitter.github.com/bootstrap/javascript.html#collapse의 예를 참조하고 소스를 확인하여 구현 방법을 확인하십시오.