jQuery UI手风琴动作超时

我在页面上使用以显示不同的内容部分。在点击链接的最后，会发送一个AJAX请求，如果结果返回成功，我需要：

• 折叠所有jQuery UI Accordion部分，然后
• 展开第一个

我想用setTimeout来做，但我相信有更好的方法。我也不知道如何“假装”点击手风琴的标签，但我认为这是一种方式，因为我实际上想显示事件的顺序：一个正在折叠，另一个正在展开

当手风琴打开时，它看起来是这样的：

<h3 id="ui-accordion-accordion-header-1" class="ui-accordion-header 
ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active 
ui-state-active ui-corner-top" role="tab" 
aria-controls="ui-accordion-accordion-panel-1" aria-selected="true" tabindex="0">
last tab</h3>

<div id="ui-accordion-accordion-panel-1" class="ui-accordion-content 
ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" 
style="display: block;" aria-labelledby="ui-accordion-accordion-header-1" 
role="tabpanel" aria-expanded="true" aria-hidden="false">content</div>

function collapseAll() {
    $('.ui-accordion-header').parent().each(function() {
        $(this).accordion({
            active: false,
            collapsible: true
        });
    });
}

$.ajax({
    type: "POST",
    data: myData,
    success: function(data) {
        if (data.status == "OK") {
            collapseAll();
        }
    }
});

最后一页
内容

当它倒塌时：

<h3 id="ui-accordion-accordion-header-1" class="ui-accordion-header 
ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" 
role="tab" aria-controls="ui-accordion-accordion-panel-1" 
aria-selected="false" tabindex="0">last tab</h3>

<div id="ui-accordion-accordion-panel-1" class="ui-accordion-content 
ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" 
aria-labelledby="ui-accordion-accordion-header-1" role="tabpanel" 
aria-expanded="false" aria-hidden="true">content</div>

最后一个选项卡
内容

根据jQuery UI Accordion API，您可以通过调用

$(".accordionSelector").accordion("option", "active", 0);

---

您可以在

上查看API文档，尝试以下方法：

<h3 id="ui-accordion-accordion-header-1" class="ui-accordion-header 
ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active 
ui-state-active ui-corner-top" role="tab" 
aria-controls="ui-accordion-accordion-panel-1" aria-selected="true" tabindex="0">
last tab</h3>

<div id="ui-accordion-accordion-panel-1" class="ui-accordion-content 
ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" 
style="display: block;" aria-labelledby="ui-accordion-accordion-header-1" 
role="tabpanel" aria-expanded="true" aria-hidden="false">content</div>

function collapseAll() {
    $('.ui-accordion-header').parent().each(function() {
        $(this).accordion({
            active: false,
            collapsible: true
        });
    });
}

$.ajax({
    type: "POST",
    data: myData,
    success: function(data) {
        if (data.status == "OK") {
            collapseAll();
        }
    }
});

---

好的，我想出了解决方案，以防有人感兴趣：

setTimeout(function() {
    $("#accordion h3:last-child").click();
}, 500);
setTimeout(function() {
    $("#accordion h3:first-child").click();
}, 1000);

---

也发布jQuery。指向JSFIDLE的链接也会有所帮助。它似乎隐藏了内容，但标题保持“打开”，图标指向下方，底部边框丢失……我认为这可以在页面加载时工作，但我不会在单击时重新加载页面，而是使用AJAX。我尝试过，它在任何时候都可以工作，而不仅仅是在页面加载时。这意味着您可以在AJAX成功结束时执行此命令。这是通过API文档实现的官方方法。