0

ページでjQuery UI アコーディオンを使用して、さまざまなコンテンツ セクションを表示します。最後にリンクがクリックされると AJAX リクエストが送信され、結果が成功を返す場合は次のことを行う必要があります。

  • すべての jQuery UI アコーディオン セクションを折りたたみ、
  • 最初のものを拡大する

私は setTimeout でそれを行うことを考えましたが、もっと良い方法があると確信しています。アコーディオンのタブのクリックを「偽装」する方法もわかりませんが、実際には一連のイベントを表示したいので、これが正しい方法だと思います。1つは折りたたまれ、もう1つは展開されています。

アコーディオンを開くと、次のようになります。

<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

次のようなことを試してください：

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 に答える