Question

我正在使用包含嵌套手风琴的JQuery手风琴，当我将它们纯粹用于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);
    }
  }
}

Answer 1

在之后初始化手风琴，您成功获取了json并将所有元素追加到其中。

Answer 2

将手风琴放在$.getJSON()内。

在获取数据之前，你所做的就是添加了。

所以手风琴是空的。

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

因此，如果没有数据，手风琴就无法实现。

所以在所有陈述之后将accordion放在$.getJSON内使所有可用于手风琴。

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

2 个答案: