Question

我最近在这里问了一个问题（并得到了答案）： jQuery Load JSON

我有一个后续问题，我希望得到一些建议。基本上，我将数据加载到以下div："#my_div"，它实际上是另一个div的子元素"#accordion"，这是一个手风琴（jQuery UI）。

我的代码如下所示：

$("#accordion").accordion({collapsible: true, clearStyle: true });

function load_list() {
 $.getJSON('json/load.php', function(data) {
        $("#my_div").empty();
        $.each(data, function(k, v){                                 
        $("#my_div").append('
                                     <li> \
                                      <div> \
                                       <input type="checkbox"> \
                                      </div> \
                                      <div>'+v.due_date+'</div> \
                                      <h3> \
                                       <span>'+v.title+'</span> \
                                       </h3> \
                                      </li> \
                                              ');
                                    });
});
}

HTML：

 <div id="accordion">
     <div id="my_div">JSON elements loaded here.</div>
 </div>

然而，问题是：在页面加载，然后是JSON元素时，手风琴不会自动调整大小以适合加载JSON的元素。只有当我折叠手风琴然后重新打开时，你才能正确地看到这些元素。（这在FF和IE中都会发生。）

我尝试将$("#accordion").accordion({collapsible: true, clearStyle: true });放在load_list()函数的末尾，但仍然得到相同的结果。对此的任何帮助都会很棒。

非常感谢！

更新：

根据以下建议，我尝试了一些不同的方法，但仍然遇到同样的问题。

以下是我尝试过的最新代码：

 function load_tasks() {

            $.ajax({
                  url: 'json/load.php',
                  dataType: 'json', 
                  success: function(data) {
                      $.each(data, function(k, v){
                                $(("#my_div").append('
                                 <li> \
                                  <div> \
                                   <input type="checkbox"> \
                                  </div> \
                                  <div>'+v.due_date+'</div> \
                                  <h3> \
                                   <span>'+v.title+'</span> \
                                   </h3> \
                                  </li> \
                                          ');
                                });                                         
                     $("#accordion").accordion({collapsible: true, clearStyle: true, autoHeight: true });
                        }
 });
 }

我还尝试了autoHeight的其他建议（默认情况下是真的，没有？），以及'resize'方法。

遗憾的是，这些似乎都没有奏效。如果其他人有任何建议，他们将不胜感激。或许，这只是在这种特殊情况下无法实现的事情。

Answer 1

我从未使用过手风琴，但是在看了一眼api docs后，我发现这可能就是你想要的： http://docs.jquery.com/UI/Accordion#method-resize

$("#accordion").accordion({collapsible: true, clearStyle: true });

function load_list() {
 $.getJSON('json/load.php', function(data) {
        $("#my_div").empty();
        $.each(data, function(k, v){                                 
        $("#my_div").append('
                                     <li> \
                                      <div> \
                                       <input type="checkbox"> \
                                      </div> \
                                      <div>'+v.due_date+'</div> \
                                      <h3> \
                                       <span>'+v.title+'</span> \
                                       </h3> \
                                      </li> \
                                              ');
    $("#accordion").accordion( "resize" );  
    });
});
}

试试这个代码段

Answer 2

您可以将accordion init移动到getJSON函数的成功回调，这将确保accordion与已加载的元素一起运行。

此外，您可以使用autoHeight确保手风琴的大小适合所有元素。

干杯，

马尔科

Answer 3

试试这个..

function load_tasks() {
        var data = ""; 
        $.ajax({
              url: 'json/load.php',
              dataType: 'json', 
              success: function(msg) {
                  data = msg;
              },
              complete: function() {
                    $.each(data, function(k, v){
                            $(("#my_div").append('
                             <li> \
                              <div> \
                               <input type="checkbox"> \
                              </div> \
                              <div>'+v.due_date+'</div> \
                              <h3> \
                               <span>'+v.title+'</span> \
                               </h3> \
                              </li> \
                                      ');
                            });                                         
                 $("#accordion").accordion({collapsible: true, clearStyle: true, autoHeight: true });               

        });

}

Answer 4

好的，我相信我明白了。虽然，我不认为这是“正确”的实现方式。

我之前没有提到这个手风琴实际上是在使用$ .tabs（）和jQuery的“tab”中。

我注意到，当我完全删除“tab”功能时，它工作正常（几乎所有的片段都会在删除标签时完美地加载手风琴）。

因此，我认为这与选项卡内部的手风琴以及页面加载时构造元素的方式有关。

作为一个黑客/解决方法，我添加了以下代码，现在非常适用：

setTimeout('$("#accordion").accordion({collapsible: true, clearStyle: true, autoHeight: true })', 1000);`

我仍然不确定是否有更好的方法可以实现这一目标，但是，等待1秒加载手风琴现在可以正常工作。

感谢所有建议。

Answer 5

            $('#accordion').accordion({
                collapsible: true,
                active: false,
                beforeActivate:function(event, ui) {
                    href = ui.newHeader.attr('id');
                    $.get(href, function(data) {
                        ui.newHeader.next("div").html(data);
                    });

                },
                heightStyle: "content"
            });

jQuery将数据加载到手风琴中

5 个答案: