JQuery Accordion 在文档加载时激活而不是在单击时激活，尽管有活动 false

Question

我正在使用包含嵌套手风琴的 JQuery 手风琴，当我在 HTML 中使用它们时效果很好。但就我而言，我必须在 JQuery 中加载嵌套的手风琴，这会阻止手风琴仅在单击时才被激活。页面加载时手风琴已经打开。我还尝试将手风琴放在 JS 的最后，但它仍然不起作用。代码sn-p：

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()。

您所做的是在获取数据之前添加手风琴。

所以手风琴是空的。

然后，您尝试获取数据...

所以手风琴没有数据就无法成功。

所以在所有语句之后将accordion 放在$.getJSON 中，就可以使所有这些都可用于手风琴。

Answer 2

初始化手风琴在你成功获得json并追加里面的所有元素。