如何初始化每個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類藏漢如手風琴，你可以挑選手風琴都開着 - 例如：

<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折皺將被關閉作爲其類別是「手風琴崩潰」，而第一個具有「在手風琴崩潰」。