javascript - 「Bootstrap: collapse plugin」遷移が完了した後に JavaScript 関数をトリガーする方法

Question

iframeBootstrap: collapseplugin transitionの後に高さのサイズを変更しようとしています。トランジションがまだ完了していないため、クリック イベントが機能しません。JavaScript が間違った高さ情報を取得します。この問題を解決するためのアイデアはありますか?

Answer 1

折りたたみプラグインで隠しイベントを処理する必要があります。

ドキュメントから

hidden - このイベントは、折りたたみ要素がユーザーから隠されているときに発生します (css トランジションが完了するのを待ちます)。

$('#myCollapsible').on('hidden', function () {
  // do something…
})

Bootstrap 3.0のコメントで@Francescが指摘したように、使用する必要があります

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Answer 2

ブートストラップ 3.0 を使用している場合は、非常に簡単です。shown.bs.collapse は、表示された要素の遷移が完了したときに発生するイベントです。このようなものを探していると思います。

$('#myCollapsible').on("shown.bs.collapse", function(){
 //trigger content change
 //this code will be triggered when the collapse transition is completed 
 //that is your myCollapsible element will have 'in' in your class
});

Answer 3

折りたたみプラグインを使用したことはありませんが、ドキュメントには、要素の遷移が完了したら呼び出す必要がある「hidden」というコールバックがあると書かれています。

$('#myCollapsible').on('hidden', function () {
    // do something…
});