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

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

Patricia Arquette

リリース： 2024-11-29 18:39:14

オリジナル

468 人が閲覧しました

How Can I Elegantly Display Bootstrap 3 Collapse State Using Chevron Icons and Core Events?

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 サイトの他の関連記事を参照してください。