如何通过 AJAX 在 JQuery Accordion 中加载内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1880845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I load content in JQuery Accordion via AJAX
提问by Andy
I have a jquery accordion that loads a lot of data. This accordion is generated by querying a database. My question - is there a way to not load the content until a specific element of the accordion has been clicked? Basically, I'd like to replicate the functionality of the jquery tab ajax content load to the accordion.
我有一个加载大量数据的 jquery 手风琴。该手风琴是通过查询数据库生成的。我的问题 - 有没有办法在点击手风琴的特定元素之前不加载内容？基本上，我想将 jquery tab ajax 内容加载的功能复制到手风琴。
采纳答案by Drew
I am using jquery ui-1.11.4 and had this same issue. This is the solution I pieced together.
我正在使用 jquery ui-1.11.4 并且遇到了同样的问题。这是我拼凑的解决方案。
The Javascript:
Javascript：
var already_loaded = new Object(); // used to track which accordions have already been loaded
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false,
//heightStyle: 'fill', // http://jqueryui.com/accordion/#fillspace -- Just sets the height of the accordion to the height of it's parent container. We need a way to change the height of the parent to that of the newly added content.
activate: function (e, ui) {
// only fire when the accordion is opening..
if(ui.newHeader.length>0){
// only retrieve the remote content once..
if(! already_loaded[ui.newHeader[0].id]==1){
var srcObj = $(ui.newHeader[0]).children('a');
var url = srcObj.attr('href');
var folder = srcObj.attr('data-folder');
//$.get(url, function (data){ // if you wanted to use the GET method uncomment this and comment the next line. Be sure to add any needed query string parameters to the URL.
$.post(url, {doCmd:'getFolderFiles', folder:srcObj.attr('data-folder')}, function (data){
$(ui.newHeader[0]).next().html(data);
var contentDiv = $(ui.newHeader[0]).next()[0];
$('#'+contentDiv.id).height(contentDiv.scrollHeight);
//$("#accordion").accordion("refresh"); // http://api.jqueryui.com/accordion/#method-refresh -- The documentation isn't clear on this but this only refreshes added/removed panels. Does not refresh existing panels with newly added content.
already_loaded[ui.newHeader[0].id]=1; // keep track of the loaded accordions
});
}
}
}
});
});
The HTML:
HTML：
<div id="accordion">
<h3><a href="program_to_generate_accordion_content.php" data-folder="2015">2015 Files</a></h3>
<div>
<p>
Loading... Please wait.
</p>
</div>
<h3><a href="program_to_generate_accordion_content.php" data-folder="2016">2016 Files</a></h3>
<div>
<p>
Loading... Please wait.
</p>
</div>
</div>
回答by Pointy
Can't you just bind a handler to the "change" event?
您不能将处理程序绑定到“更改”事件吗？
