Блог

Я использую jQuery accordion, который содержит вложенные аккордеоны, которые отлично работали, когда у меня были они исключительно в HTML. Но в моем случае мне приходится загружать вложенные аккордеоны в 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);
    }
  }
}
  

Поместите аккордеон внутрь $.getJSON() .

То, что вы сделали, добавлено аккордеоном перед получением данных.

Таким образом, аккордеон пуст.

Затем вы пытаетесь получить данные…

Таким образом, accordion не выполняет его без данных.

Таким образом, помещение accordion inside $.getJSON после всех инструкций делает все доступным для accordion.

Инициализируйте аккордеон после успешного получения json и добавьте все элементы внутри.