Question

我在页面上使用jQuery UI accordion来显示不同的内容部分。最后，当点击链接时，会发送一个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>

当它崩溃时：

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

Answer 1

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

打开第一部分

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

您可以在http://api.jqueryui.com/accordion/#option-active

查看API文档

Answer 2

尝试这样的事情：

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

Answer 3

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

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

关于timeOut的jQuery UI手风琴动作

3 个答案: