각 JQuery UI 아코디언을 초기화하여 데이터 태그에 따라 다른 항목을 열려면 어떻게해야합니까?

Question

처음에 다른 항목을 여는 여러 JQuery UI 아코디언을 초기화하려고합니다. 나는 모든 아코디언을 개별적으로 초기화해야하는 것을 원하지 않지만 모든 기능을 하나의 기능으로 묶어서 CMS와의 통합을 용이하게합니다. 나는이 방법을 이룩하려고 노력하고있다 :

<div class="accordion" data-initiallyopen="1"> 
    <h3>HEADER 1</h3> 
    <div class="details">...</div> 
    <h3>HEADER 2</h3> 
    <div class="details">...</div> 
</div> 

$(".accordion").accordion({ 
    active: $(this).data("initiallyopen"), 
    collapsible: true, 
    heightStyle: "content" 
}); 

이것은 불행하게도 작동하지 않는다. 콘솔 오류가 없습니다. $ (this)는 분명히 올바른 객체가 아닙니다.하지만 init 내에서 아코디언에 액세스하는 방법이 있습니까?

Answer 1

이 this fiddle에 테스트, 시도 :

$(".accordion").each(
    function() { 
     $(this).accordion({ 
      active: $(this).data("initiallyopen"), 
      collapsible: true, 
      heightStyle: "content" 
     }) 
    } 
); 

Answer 2

부트 스트랩 아코디언 기능을 사용하는 경우, 당신은 "붕괴"를 HTML 클래스를 설정하면 aswell 아코디언, 당신은 아코디언이 개방되는 선택할 수 있습니다 - 예 : 그 클래스 "아코디언 붕괴가"이 예에서는

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       Collapsible Group Item #1 
      </a> 
     </div> 
     <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
       Anim pariatur cliche... 
      </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       Collapsible Group Item #2 
      </a> 
     </div> 
     <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
       Anim pariatur cliche... 
      </div> 
     </div> 
    </div> 
</div> 

는 제 2 아코디언은 첫 번째 "의 아코디언 붕괴"을 가지고있는 반면, 폐쇄된다.