jQuery Accordion并通过AJAX加载内容

我想使用jQuery load命令加载每个jQuery 手风琴标题下的内容.目前,我已将此设置如下

$(function() {

    $("#accordion").accordion({          
        header: "h2",
        active: false              
    });

    $("h2", "#accordion").click(function(e) {
        var contentDiv = $(this).next("div");
        contentDiv.load($(this).find("a").attr("href"));      
    });                    
});

和HTML(相关代码段)

    

        
Home
        

           
        
    
    

        
Products
        

                  
        
    

现在一切正常,但是存在一个问题,即以这种方式加载内容会在某些浏览器(IE6)和其他浏览器(FF)上中断手风琴插件的向下滑动动画,因此不会发生向下滑动动画.

我想我需要阻止下载动画直到内容加载(使用加载回调函数),但我不确定如何将其挂钩到手风琴插件中.

任何想法非常感谢!

1> 小智..：

---

快点抬头.

这些答案都不会按预期工作与最新的API以来jQuery UI的1.9事件change,并changestart已经改变为" 激活 "和" beforeActivate分别".

希望能节省几分钟.

2> mogmismo..：

---

这应该可以解决您的问题:

    $('#accordion').accordion({ 
    changestart: function(event, ui){
        var clicked = $(this).find('.ui-state-active').attr('id');
        $('#'+clicked).load('/widgets/'+clicked);
    }
});

其技巧是手风琴改变了活动容器的类,因此您可以使用.find()来定位活动手风琴并对其执行操作.

---

实际上,这个特定的代码有一个错误,它无法正常工作.如果要查找'.ui.state-active'元素,则需要将事件从"changestart"更改为"change".否则,在jQueryUI将类应用于heading元素之前,您正在调用该函数.结果:`change:function(event,ui){...}`

3> Nazariy..：

---

我尝试使用Jquery UI将accordion加载到ajax选项卡时遇到同样的问题.在销毁之前,手风琴无法初始化.

这是示例javascript代码:

    $("#navigation").tabs({ 
    show: function(ui) {
        $('#browse').accordion('destroy').accordion({autoHeight: false, collapsible: true , active: false, header: 'h3'});
    } 
});

4> Josh Bones..：

---

我刚刚做了类似的事情,发现诀窍是在DOM准备好后立即从ajax请求加载内容,并在请求的回调函数中启用accordion.

我尝试使用jquery的加载函数,但遇到了麻烦,最后使用了ajax函数.

在您使用多个ajax调用的情况下,我猜您可以将每个调用嵌套在前一个的回调函数中.这实际上是一种非常低效的方式,但如果它们只是小文本文件就应该没问题.

示例如下:

$.ajax({type:"get",url:"home.htm",success: function(data){
    $("#homeDiv").html(data);
    $.ajax({type:"get",url:"products.htm",success: function(data){
            $("#productsDiv").html(data);
            $("#accordion").accordion();
        }
    });
}});

应该这样做......

5> Neo..：

---

我已经完成了这个,然后让我复制并粘贴到这里.

    {section name=cat_loop loop=$cats}
            

                
                    {print id=$cats[cat_loop].subcat_title}
                
            
            

                {include file='include/section_profile_fields.stpl'}
            
    {section}

里面的东西{}包含服务器端脚本,基本上是一个循环来打印多个手风琴的内容.这是javascript:

jQuery('.accordion').accordion({
            changestart: function(event, ui){
                   var $activeCord = jQuery(this).find('.ui-state-active');
                   var contentDiv = $activeCord.next("div");
                contentDiv.load('ajax_member_profile_edit.aspx?cat_id='+$activeCord.attr('data-id'));
            }

});

6> 小智..：

---

这是最简单,最简单的方法

    $("#accordion").accordion({
                active:false,
                change:function(event, ui) {
                    if(ui.newContent.html()==""){
                        ui.newContent.load(ui.newHeader.find('a').attr('href'));
                        }
                },
                autoHeight: false
            });