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（ 相关代码段 ）
现在一切正常，但是存在一个问题，即以这种方式加载内容会在某些浏览器（IE6）和其他浏览器（FF）上中断手风琴插件的向下滑动动画，因此不会发生向下滑动动画。
我想我需要阻止下载动画直到内容加载（使用加载回调函数），但我不确定如何将其挂钩到手风琴插件中。
任何想法非常感谢！
快点抬头。
这些答案都不会像最新的API那样有效，因为自jQuery UI 1.9以来，事件的change和更改开始分别被改为“ 激活 ”和“ 之前 激活 ”。
希望能节省几分钟。
这应该可以解决您的问题：
$('#accordion').accordion({ changestart: function(event, ui){ var clicked = $(this).find('.ui-state-active').attr('id'); $('#'+clicked).load('/widgets/'+clicked); } });
其技巧是手风琴改变了活动容器的类，因此您可以使用.find（）来定位活动手风琴并对其执行操作。
我尝试使用Jquery UI将accordion加载到ajax选项卡时遇到了同样的问题。 在销毁之前，手风琴无法初始化。
这是示例javascript代码：
$("#navigation").tabs({ show: function(ui) { $('#browse').accordion('destroy').accordion({autoHeight: false, collapsible: true , active: false, header: 'h3'}); } });
我刚刚做了类似的事情，发现诀窍是在DOM准备好后立即从ajax请求加载内容，并在请求的回调函数中启用accordion。
我尝试使用jquery的加载函数，但遇到了麻烦，最后使用了ajax函数。
在您使用多个ajax调用的情况下，我猜您可以将每个调用嵌套在前一个的回调函数中。 这实际上是一种非常低效的方式，但如果它们只是小文本文件就应该没问题。
示例如下：
$.ajax({type:"get",url:"https://stackoverflow.com/questions/646415/jquery-accordion-and-loading-content-through-ajax/home.htm",success: function(data){ $("#homeDiv").html(data); $.ajax({type:"get",url:"https://stackoverflow.com/questions/646415/jquery-accordion-and-loading-content-through-ajax/products.htm",success: function(data){ $("#productsDiv").html(data); $("#accordion").accordion(); } }); }});
应该这样做……
这是最简单，最简单的方法
$（ “＃手风琴”）。手风琴（{
主动：假的，
更改：function（event，ui）{
如果（ui.newContent.html（）== “”）{
ui.newContent.load（ui.newHeader.find（ 'a'）的ATTR（ 'href' 属性）。）;
}
}，
autoHeight：false
}）;
我已经完成了这个，然后让我复制并粘贴到这里。
{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')); } });
这实际上比你们所有人都容易得多！
在您的doc ready函数中：
$('#accordion').accordion(); $("#accordion").click(function(e) { $('.ui-accordion-content-active').load('/path/to/content'); });
和你的HTML
Click me
Loading....
Or even click me!
Loading...
Etc..
Loading
只是在盒子外思考片刻，你有没有理由使用ajax来加载内容？ 从你的例子来看，它看起来好像最初只能加载内容并完成它。
至于你的实际问题，你尝试过这样的事情：
var contentDiv = $(this).find("div");
或探索你的加载可能干扰手风琴的DOM树视图的任何其他方式？ （例如，尝试加载更深层嵌套的div）？
也许这与在这里讨论的内容完全相同，但是很多这些片段帮助我让我的解决方案正常工作，所以我认为id分享它，任何其他人都需要做（确切地说！）我需要做什么。
我想将外部内容片段加载到手风琴中但是要正确resize等等是fiddley，这是我的解决方案：
$(document).ready(function () { //All the content is loaded at page load which means you dont get screwy animations $('#accordion').accordion({ autoHeight: false, // set to false incase theres loads more in one panel than the others create: function (event, ui) { $('div#accordion > div').each(function () { //for each accordion panel get the associated content from external file and load it in. var id = $(this).attr('id'); $(this).load('ajax_content.html #' + id, function () { $('#accordion').accordion('resize'); }); }); } }); });
希望这有助于某人=）
哦，我应该提到，显然在ajax_content.html文件中有一个div与每个手风琴面板具有相同的id，所以它知道放在哪里！
我一直在处理这个问题，使用jquery 1.4，这就是我解决它的方法。 “ui”对象有两个重要的属性“newContent”和“newHeader”。 我使用newContent并在div上放置一个id来保存内容。 我还有一个隐藏的输入标签来保存重要数据，它感觉更干净。
$("#accordion").accordion({ disabled: false, autoHeight: false, collapsible: true, active: false, header: 'h2', animated: 'bounceslide', changestart: function (event, ui) { var location = ui.newContent.find('input:hidden[name=location]').val(); ui.newContent.find('#data').load(location); } });
我相信这是尚未给出的最简单的答案，并且满足所有OP的要求……在显示div之前加载，并根据a标签的href动态地加载：
$("#accordion").accordion({ active: false, clearStyle: true, changestart: function(event, ui){ var href = $(ui.newHeader.find("a")).attr("href"); $.post(href, function(data) { ui.newHeader.next("div").html(data); }); } });
我正在寻找同一个问题的答案，并在这里尝试了几个例子。 但是，我使用ui-state-active的示例得到了一个未定义的值：
var clicked = $(this).find('.ui-state-active').attr('id');
我还想确保.load函数仅在第一次扩展每个手风琴面板时调用。 通过结合其他几个海报的答案，我得到了我想要的结果：
$('#accordion').accordion({ changestart: function(event, ui){ if(ui.newContent.html() == ""){ var id = ui.newContent.attr("id"); ui.newContent.load("[your url]" + id); } });
$( "#accordion" ).bind( "accordionchange", function(event, ui) { if (ui.newHeader.text()=="LaLaLa"){ do here .... } });