我有一个加载大量数据的 jquery 手风琴。该手风琴是通过查询数据库生成的。我的问题 - 有没有办法在单击手风琴的特定元素之前不加载内容？基本上，我想将 jquery tab ajax 内容加载的功能复制到手风琴。
我正在使用 jquery ui-1.11.4 并遇到了同样的问题。这是我拼凑出来的解决方案。
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
});
}
}
}
});
});
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
