jQuery Accordion 和通过 AJAX 加载内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/646415/
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
jQuery Accordion and loading content through AJAX
提问by Russ Cam
I would like to load the content under each jQuery accordionheader using the jQuery loadcommand. Currently, I have set this up as the following
我想使用 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"));
});
});
and the HTML (relevant snippet)
和 HTML（相关片段）
<div id="accordion">
<div>
<h2><a href="home.htm">Home</a></h2>
<div>
<!-- placeholder for content -->
</div>
</div>
<div>
<h2><a href="products.htm">Products</a></h2>
<div>
<!-- placeholder for content -->
</div>
</div>
</div>
Now this all works fine, but there is a problem in that loading content in this manner interrupts the slide down animation of the accordion plugin on some browsers (IE6), and on others (FF), the slide down animation does not occur.
现在这一切正常，但存在一个问题，即以这种方式加载内容会在某些浏览器 (IE6) 上中断手风琴插件的向下滑动动画，而在其他浏览器 (FF) 上，则不会发生向下滑动动画。
I'm thinking that I would need to prevent the slide down animation from occurring until the content has loaded (using the load callback function) but am unsure how to hook this into the accordion plugin.
我想在内容加载之前我需要阻止向下滑动动画（使用加载回调函数），但我不确定如何将其挂接到手风琴插件中。
Any ideas greatly appreciated!
任何想法都非常感谢！
回答by Greg Barnes
Just a quick heads up.
只是快速抬头。
None of these answers will work as expected with the latest API as since jQuery UI 1.9 the events changeand changestarthave been altered to 'activate' and 'beforeActivate' respectively.
这些答案都不会按预期工作与最新的API以来jQuery UI的1.9事件change，并changestart已经改变为“激活”和“ beforeActivate分别”。
Hope that saves someone a few minutes.
希望能节省一些人的时间。
回答by mogmismo
This should solve your issue:
这应该可以解决您的问题：
$('#accordion').accordion({
changestart: function(event, ui){
var clicked = $(this).find('.ui-state-active').attr('id');
$('#'+clicked).load('/widgets/'+clicked);
}
});
The trick to it is that accordion changes the classes of the live container, so you can use .find() to locate the active accordion and perform an action on it.
诀窍在于，手风琴会更改活动容器的类，因此您可以使用 .find() 来定位活动的手风琴并对其执行操作。
回答by Nazariy
I run in to same problem while trying to load accordion in to ajax tabs with Jquery UI. The accordion cannot be initialised before you destroy it.
我在尝试使用 Jquery UI 将手风琴加载到 ajax 选项卡时遇到了同样的问题。手风琴在销毁之前无法初始化。
Here is example javascript code:
这是示例 javascript 代码：
$("#navigation").tabs({
show: function(ui) {
$('#browse').accordion('destroy').accordion({autoHeight: false, collapsible: true , active: false, header: 'h3'});
}
});
回答by Josh Bones
I've just done something similar, and found the trick was to load the content from an ajax request as soon as the DOM is ready, and enable to accordion in the request's callback function.
我刚刚做了类似的事情，发现诀窍是在 DOM 准备好后立即从 ajax 请求加载内容，并在请求的回调函数中启用手风琴。
I tried doing it with jquery's load function, but had trouble, ended up using the ajax function instead.
我尝试用 jquery 的 load 函数来做，但遇到了麻烦，最终改用了 ajax 函数。
In your case with multiple ajax calls, i guess you could nest each one in the callback function of the previous. Which is really a horribly inefficient way to do it but if they're just small text files it should be ok.
在您有多个 ajax 调用的情况下，我猜您可以将每个调用都嵌套在前一个的回调函数中。这确实是一种非常低效的方法，但如果它们只是小文本文件，那应该没问题。
example as follows:
示例如下：
$.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();
}
});
}});
that should do it...
应该这样做...
回答by Neo
I've done this before let me copy and paste it here.
我之前做过这个，让我把它复制粘贴到这里。
<div class="accordion">
{section name=cat_loop loop=$cats}
<h3 data-id="{$cats[cat_loop].subcat_id}">
<a href='#' rel='loaderAnchor' id='lanch-{$cats[cat_loop].subcat_id}'>
{print id=$cats[cat_loop].subcat_title}
</a>
</h3>
<div id='section-{$cats[cat_loop].subcat_id}' >
{include file='include/section_profile_fields.stpl'}
</div>
{section}
<div>
The stuff inside {}contains server-side scripting and is basically a loop to print content for multiple accordions. Here is the javascript:
里面的东西{}包含服务器端脚本，基本上是一个循环来打印多个手风琴的内容。这是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'));
}
});
回答by Wildboom
Here is the simplest and easiest way to do it
这是最简单和最简单的方法
$("#accordion").accordion({
active:false,
change:function(event, ui) {
if(ui.newContent.html()==""){
ui.newContent.load(ui.newHeader.find('a').attr('href'));
}
},
autoHeight: false
});
回答by user1098928
This should solve the problem of loading the accordion before it is activated:
这应该可以解决在激活之前加载手风琴的问题：
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$("#accordion").children("div").each( function() {
var a = $(this).find("a");
var ref = $(a).attr("href");
$(a).attr("href", "#");
$(this).find("div").load(ref);
});
$("#accordion").ajaxStop(function() {
$(this).accordion({
header: "h2",
active: false,
collapsible: true,
clearStyle: true
});
});
})
//]]></script>
<div id="accordion">
<div><h2><a href="home.htm">Home</a></h2><div></div></div>
<div><h2><a href="products.htm">Products</a></h2><div></div></div>
</div>
回答by Derek McLean
This is actually much easier than you are all making out!
这实际上比你们想象的要容易得多！
In your doc ready function:
在您的文档就绪功能中：
$('#accordion').accordion();
$("#accordion").click(function(e) {
$('.ui-accordion-content-active').load('/path/to/content');
});
and your html
和你的 html
<div id = "accordion">
<h3>Click me</h3>
<p>Loading....</p>
<h3>Or even click me!</h3>
<p>Loading...</p>
<h3>Etc..</h3>
<p>Loading</p>
</div>
回答by Edd
Maybe this isnt entirely the same as whats being talked about here, but a lot of these snippets helped me to get my solution working so i thought id share it incase anyone else needs to do (exactly!) what i needed to do.
也许这与这里讨论的内容不完全相同，但是很多这些片段帮助我使我的解决方案起作用，所以我想我会分享它，以防其他人需要做（正是！）我需要做的事情。
i wanted to load external content fragments into an accordion but getting it to resize properly etc was fiddley, heres my solution:
我想将外部内容片段加载到手风琴中，但让它正确调整大小等很麻烦，这是我的解决方案：
$(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');
});
});
}
});
});
Hope this helps someone =)
希望这对某人有帮助 =)
Oh and i should have mentioned that obviously in the ajax_content.html file there is a div with a the same id as each of the accordion panels so it knows what to put where!
哦，我应该提到，显然在 ajax_content.html 文件中有一个与每个手风琴面板具有相同 ID 的 div，因此它知道该放什么！
回答by MarkusQ
Just thinking outside the box for a moment, is there any reason you're using ajax to load the content? It looks, from your example at least, as if the content could just be loaded initially and be done with it.
暂时跳出框框思考一下，您是否有任何理由使用 ajax 加载内容？至少从您的示例来看，它看起来好像内容可以最初加载并完成。
As for your actually question, have you tried something like this:
至于你的实际问题，你有没有尝试过这样的事情：
var contentDiv = $(this).find("div");
or explored any other way in which your loading might be interfering with the accordian's view of the DOM tree? (e.g., trying loading a more deeply nested div)?
或探索任何其他方式，您的加载可能会干扰 DOM 树的手风琴视图？（例如，尝试加载更深层嵌套的 div）？
