web-dev-qa-db-ja.com

jQueryアコーディオン-OnCollapseおよびOnExpandイベント

私はこのような単一のタイトルのアコーディオンを持っています

<div class="accordion" id="accordion_acquired_services">
    <h3><a href="#">Acquired services</a></h3>
    <table id="tbl_acquired_services">
        <tbody></tbody>
    </table>
</div>

私が欲しいのは、アコーディオンを開いた状態と閉じた状態でイベントをバインドすることです...

実際に私が達成したいのは、拡張されるたびにアコーディオンのコンテンツを設定するajaxリクエストを実行することです...

奇妙なことに、onExpand/onCollapseイベントはありません

これまでのところ私はこれを持っています

$( "#accordion_acquired_services" ).bind( "accordionchange", function(event, ui) {   
    $('#tbl_acquired_services').html('');
    //trigger ajax
});

しかし、それは折りたたまれたときと展開されたときの両方の場合にトリガーされます...どちらがどちらであるかをどうやって知ることができますか？

jqueryeventsaccordion
11
DS_web_developer

このソリューションを試してください：

var opened = $(this).find('.ui-state-active').length;
2
DS_web_developer

時間は変わり、jqueryも変わります。 スレッド からコピー/貼り付け

$("#accordion").accordion({ activate: function(event, ui) {
          alert(ui.newHeader.text());
  }
});

別のイベント：

   $("#accordion").accordion({ beforeActivate: function(event, ui) {
        alert(ui.newHeader.text());         
     }
  });

jQuerysのドキュメントをご覧ください 詳細については

12
Toydor

ここに注意すべき2つのコードがあります

1.表示2.表示3.非表示4.非表示

したがって、コードは次のようになります

$('#accordion').on('show.bs.collapse', function () {
 //on clicking the accordion menu
});

$('#accordion').on('hide.bs.collapse', function () {
 //on clicking the accordion menu
});

したがって、Hidden and Shownを使用すると、アコーディオンメニューのコンテンツが閉じた後または完全に開いた後にトリガーできます。

$('#accordion').on('shown.bs.collapse', function () {
 //after menu opens
});

$('#accordion').on('hidden.bs.collapse', function () {
 //after menu closes
});
5
Shivachandra

changeイベントとactiveオプションを使用できます。このような：

$('#accordion').bind('accordionchange', 
    function() {
         alert('Active tab index: ' + $(this).accordion('option', 'active'))
    });
3
Anderson Pimentel

私はそれが古いスレッドであることを知っていますが、これは本当に私を助けました

$( "#Accordion" ).accordion({
collapsible: true,
heightStyle: "content",
activate: function(event, ui) {

  if(ui.newHeader[0]){

    if( ui.newHeader[0].id =='ID of h3'){
        // run code here
      }
    }

  }

 }
});

このチェックを行うと、アコーディオンを開いたときにのみアコーディオンを閉じたときに生成されない新しいヘッダーオブジェクトがあるかどうかが確認されます。

1
Francois Lemieux

this SO post によると、jQueryは上記と同じ方法で変更を公開しません。これは私が書いたスクリプトであり、最新のjQueryライブラリで動作します。開くとアコーディオンのIDを取得し、そのハッシュでURLを更新します。

$(accordionSelText).accordion({
        activate: function(event, ui) {

            var accordionId=ui.newHeader.closest('.accordion').attr('id');  // Grabs the id of the accordion

            try {
                    if (accordionId) {
                        window.location.hash = accordionId;
                        console.log('Active accordion index: ' + accordionId);
                    }
            }catch(e){}
        }
    });
0
Aaron Belchamber