Question

我必须使用AJAX将手风琴面板加载到我的一个页面中，我发现JQuery是“手风琴化”HTML文件中定义的所有面板，但没有通过Javascript加载的面板。另一个小怪癖：我是在一架嵌套式手风琴上演奏的 - 手风琴中的手风琴。如果你愿意的话，这是手风琴的开始。

我检查了其他Stack Overflow问题和JQuery论坛，我发现其中大多数是关于在加载数据后调整面板大小。我发现的最接近的问题是here，但它没有回答我的问题，因为试图销毁然后重新手风琴 - 我的JS加载的面板不起作用。

这是我的html主题部分的相关部分：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/flick/jquery-ui.css" type="text/css" />  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>  

<script type="text/javascript">  
  $(document).ready(function() {
    $(".accordion").accordion({
        collapsible: true, 
        icons: false,
        autoHeight: false,
        active: false 
    });
  });  
</script>

这是我的html正文部分的相关部分：

<div class="accordion">
    <h3 id="acc1">First panel title</h3>
    <div>First panel content</div>

    <h3 id="acc2">Second panel title</h3>
    <div class="accordion" id="ajaxresults-aliaslist">This is where the nested accordion goes</div>

    <h3 id="acc3">Third panel title</h3>
    <div>Thirdpanel content</div>
</div>

<script type="text/javascript">
$("#ajaxresults-aliaslist").load("/loadaliaslist/");
</script>

当javascript加载“/ loadaliaslist /”时，会收到包含以下内容的消息：

<h3>1st panel within a panel title</h3>
<div>1st panel within a panel content</div>

<h3>2nd panel within a panel title</h3>
<div>2nd panel within a panel content</div>

<h3>3rd panel within a panel title</h3>
<div>3rd panel within a panel content</div>

我知道上面的内容正在传递给div，因为当我加载页面时内容显示为非手风琴。而不是手风琴中的手风琴，我只是在梦境序列的第一层获得了一堆无聊的内容。我得走下一层......等等，我在哪里？

是的，还有一件事：我尝试了两件不起作用的东西：
- 我尝试将加载和手风琴脚本放在页面底部（首先加载），希望顺序很重要。（noobish？不确定......）
- 我尝试在最后添加一个脚本来销毁并重新创建面板，如下所示：

$("#ajaxresults-aliaslist").accordion('destroy').accordion();

这就是全部。我真的希望那里有手风琴的莱昂纳多迪卡普里奥，可以帮助我摆脱困境。非常感谢！

Answer 1

未经测试，但尝试这样的事情......

问题很可能是因为事件处理程序未附加到插入的内容（通过Ajax）。

$(function() {
    var config = {
        collapsible: true, 
        icons: false,
        autoHeight: false,
        active: false
    }
    $(".accordion").live('load', function(){
        $(this).accordion(config);
    }).accordion(config);
});

编辑：稍微更改了代码（仍然未经测试）。

Answer 2

从OP编辑：找到解决方案

在玩了更多之后，只要AJAX在pageload上立即加载新数据，我就找到了解决这个问题的方法。解决方案是在加载后立即调用手风琴功能一次。如下面的解决方案：

<script type="text/javascript">  
$("#ajaxresults-aliaslist").load("/loadaliaslist/",  
    function(response, status, xhr) {    
    if (status == "error") {   
        var msg = "Sorry but there was an <strong>error</strong>: ";   
        $("#error").html(msg + xhr.status + " " + xhr.statusText);   
    }  
/* All panels are accordionized immediately after loading the content */   
    $(".accordion").accordion({   
        collapsible: true,  
        icons: false,  
        autoHeight: false,  
        active: false  
     });   
});   
</script>

提醒：这只有在立即加载所有手风琴内容时才有效。如果在第一个accor之后加载了多条内容

Answer 3

我想你想要重置手风琴控制。尝试这样做：

$('#accordion')[0].innerHTML = "";

之后使用附加内容用HTML填充控件。

JQuery Accordion没有“手风琴化”通过AJAX加载的新面板

3 个答案:

从OP编辑：找到解决方案