JQuery 액티브 false가 발생 함에도 불구하고 클릭 대신에 문서로드시 Accordion이 활성화됩니다.

Question

순전히 HTML 형식으로 작동했을 때 잘 작동하는 중첩 된 아코디언이 포함 된 JQuery 아코디언을 사용하고 있습니다. 하지만 제 경우에는 JQuery에서 중첩 된 아코디언을로드해야합니다. 그러면 아코디언이 클릭되었을 때만 활성화됩니다. 아코디언은 페이지가로드 될 때 이미 열려 있습니다. JS에서 아코디언을 마지막으로 넣으려고했지만 여전히 작동하지 않았습니다. 코드 :

HTML/ERB :

<% @year.each do |y| %> 
<div class="accordion" id="years"> 
    <h3 class="ui-accordion-header year"><a href="#"><%= y.date %></a></h3> 
</div> 
<% end %> 

JS :

var months = []; 
var loadURL = "stats/show"; 

$("div.accordion").accordion({ 
     collapsible: true, 
     active: false, 
     autoHeight: true, 
     event: "click" 
}); 


$.getJSON(loadURL, function(data){ 
    //parse data and place in empty arrays 
    for(var key in data.month){ 
    months.push(data.month[key]); 
    } 

    //give each year tab an index number 
    $('h3.year').each(function(index){ 
     $(this).attr('id', 'ui-accordion-years-header-' + index); 
    }) 

    for(var i = 0; i < months.length; i++){ 
    //create and append month container to each year tab 
    $("#ui-accordion-years-header-" + i).after("<div id='months" + i + "' class='months accordion ui-accordion ui-widget ui-helper-reset ui-accordion-content ui-widget-content'></div>"); 


    for (var j = 0; j < months[i].length; j++){ 
     //parse each month of the year and place month tabs in month container 
     var accordion_month = '<h3 class= "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" id="months_tab' + j + '" aria-controls="ui-accordion-1-panel-0" aria-selected="false" tabindex="0"><a href="#" name=' + months[i][j] + '>' + months[i][j] + '</a></h3>'; 


     $("#months" + i).append(accordion_month); 
    } 
    } 
} 

Answer 1

어코디언 내부에 $.getJSON()을 넣습니다.

데이터를 가져 오기 전에 수행 한 작업은 accordian이 추가되었습니다.

아코디언이 비어 있습니다.

그런 다음, 당신은

그래서 아코디언 데이터없이하지 않습니다 ... 데이터를 얻을하려고합니다.

accordion을 $.getJSON 안에 모두 넣으면 아코디언을 모두 사용할 수있게됩니다.

Answer 2

이 성공적으로 JSON을 얻을 내부의 모든 요소를 ​​추가 후 아코디언 를 초기화합니다.