Jquery ui jQuery手风琴和通过AJAX加载内容

我想使用jQuery命令加载每个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）上，向下滑动动画不会出现

我在想，在加载内容之前（使用加载回调函数），我需要防止向下滑动动画发生，但我不确定如何将其挂接到accordion插件

---

非常感谢您的任何想法

暂时跳出框框思考一下，是否有任何理由使用ajax加载内容？至少在您的示例中，看起来内容可以在最初加载并使用它来完成

至于你的问题，你有没有试过这样的方法：

var contentDiv = $(this).find("div");

---

或者探索您的加载可能会干扰accordian对DOM树的视图的任何其他方式？（例如，尝试加载嵌套更深的div）？

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

我试着用jquery的load函数来实现它，但遇到了麻烦，最终改用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();
        }
    });
}});

---

应该可以了…

我在用Jquery UI将accordion加载到ajax选项卡时遇到了同样的问题。 在你毁掉手风琴之前，它不能被初始化

下面是javascript代码示例：

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

---

这将解决您的问题：

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

---

技巧在于accordion会更改活动容器的类，因此可以使用.find（）定位活动accordion并对其执行操作

我以前做过，让我复制并粘贴到这里

$( "#accordion" ).bind( "accordionchange", function(event, ui) {   
    if (ui.newHeader.text()=="LaLaLa"){
       do 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>

---

也许这与这里讨论的内容并不完全相同，但是这些片段中有很多帮助我使我的解决方案能够工作，所以我想我会分享它，以防其他人需要做（确切地说！）我需要做的事情

我想将外部内容片段加载到手风琴中，但要使其正确调整大小等操作非常繁琐，以下是我的解决方案：

$(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与每个accordion面板的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);


         }

     });

---

下面是最简单、最简单的方法

$("#accordion").accordion({ active:false, change:function(event, ui) { if(ui.newContent.html()==""){ ui.newContent.load(ui.newHeader.find('a').attr('href')); } }, autoHeight: false }); $（“手风琴”）。手风琴({ 活动：错误， 更改：功能（事件、用户界面）{ 如果（ui.newContent.html（）=“”）{ ui.newContent.load（ui.newHeader.find（'a'）.attr（'href'））； } }, 自动高度：false });

---

我在寻找同一个问题的答案，并在这里尝试了几个例子。但是，我使用ui状态为active的示例获得了一个未定义的值：

var clicked = $(this).find('.ui-state-active').attr('id');

我还想确保.load函数仅在每个accordion面板第一次展开时才被调用。通过结合其他几张海报的答案，我得到了我想要的结果：

$('#accordion').accordion({ 
    changestart: function(event, ui){
         if(ui.newContent.html() == ""){
             var id = ui.newContent.attr("id");
             ui.newContent.load("[your url]" + id);
         }
});

---

这实际上比你们所想象的要容易得多

在doc ready函数中：

$('#accordion').accordion();
$("#accordion").click(function(e) {
  $('.ui-accordion-content-active').load('/path/to/content');
});

还有你的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>

点击我
加载

甚至点击我！
加载

等
装载

这应该可以解决在手风琴激活前加载手风琴的问题：

<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>

//

我认为这是尚未给出的最简单的答案，并且满足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);
        });

    }
});

只是简单的提醒一下

对于最新的API，这些答案都不会像预期的那样起作用，因为自jQuery UI 1.9以来，

change

和

changestart

事件已分别更改为“”和“”

---

希望这能节省一些时间。

我一直在考虑将每个手风琴窗格的内容与实际的“菜单”页面分离/分离，并仅在必要时加载。窗格最终将在运行时从数据源动态生成…在文档准备就绪时加载每个窗格的内容不会有任何错误，除了性能（我不知道在这个阶段，将来可能会有多少窗格）。是的，但看起来您仍然可以在服务器端执行此操作，当页面生成时，而不是每次更改选项卡时强加一系列往返。大多数web框架都支持这种解耦，没有太多的麻烦。您在这里给了我思考的食物，我可能会在稍后阶段完成这项工作。但是，我还是想解决原来的问题！因此，作为第一步，尝试将更新的元素隐藏在结构中更深一点。报告它的作用，事实上，这段代码有一个错误，不能正常工作。如果要查找“.ui.state active”元素，则需要将事件从“changestart”更改为“change”。否则，您将在jQueryUI将该类应用于之前调用该函数

<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>

$("#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);
        });

    }
});