シェブロン アイコンとコア イベントを使用して Bootstrap 3 の折りたたみ状態をエレガントに表示するにはどうすればよいですか?

Bootstrap 3 Collapse State のシェブロン アイコン インジケーター

Bootstrap 3 Javascript ドキュメントで提供される Collapse 用のコア例を利用して、以下を表示できます。山形アイコンを使用して要素の展開状態または折りたたまれた状態を示します。既存の実装では、次のイベント ハンドラーを使用してこれを実現しています:

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

このアプローチは機能しますが、この課題に対するより洗練された解決策がある可能性があります。具体的には、コア関数 $('#accordion').on('hidden.bs.collapse', ...) を活用して、目的の効果を実現したいと考えています。

提供されている HTML の場合Bootstrap 3 の例:

<div class="panel-group">

シェブロンを使用して折りたたみ状態を示す次の CSS を検討してください。 icons:

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

これらのスタイルを設定すると、hidden.bs.collapse イベントを使用して、折りたたみ状態に基づいてシェブロン アイコンを動的に更新できるようになります:

$('#accordion').on('hidden.bs.collapse', function () {
    $('.accordion-toggle').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
});

$('#accordion').on('shown.bs.collapse', function () {
    $('.accordion-toggle').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
});

Thisこのアプローチでは、Bootstrap 3 によって提供されるコア イベントを利用して、クリーンで簡潔なコード構造を維持しながら、折りたたみ状態の変更を処理します。

以上がシェブロン アイコンとコア イベントを使用して Bootstrap 3 の折りたたみ状態をエレガントに表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。