0

我在页面上使用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>

当它折叠时：

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

3 回答 3

0

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

setTimeout(function() {
    $("#accordion h3:last-child").click();
}, 500);
setTimeout(function() {
    $("#accordion h3:first-child").click();
}, 1000);
于 2013-11-06T16:45:43.133 回答
0

根据 jQuery UI Accordion API，您可以通过调用打开第一部分

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

您可以在http://api.jqueryui.com/accordion/#option-active查看 API 文档

于 2013-11-06T14:27:05.610 回答
0

尝试这样的事情：

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();
        }
    }
});
于 2013-11-06T15:36:15.907 回答