CSS を使用して、Bootstrap 3 アコーディオン パネルに山形アイコンを追加して、折りたたみ状態を視覚的に示すにはどうすればよいですか?

CSS を使用して折りたたみ状態のシェブロン アイコンを表示する

Bootstrap 3 フレームワークでは、折りたたみ可能なパネルを作成するためにアコーディオン コンポーネントがよく使用されます。これらのパネルのデフォルト機能には表示の切り替えが含まれていますが、ユーザーは山形アイコンを使用して現在の折りたたみ状態を視覚的に表示することで、これをさらに強化したい場合があります。

CSS アプローチ

次の CSS アプローチを使用して、パネル見出しに山形を追加できます:

.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 */
}

これを使用するにはこのアプローチでは、上記の CSS をスタイル シートに追加します。これにより、パネルの見出しに山形が追加され、開いたパネルには下向きの山形が表示され、折りたたまれたパネルには上向きの山形が表示されます。

サンプル HTML

これを使用CSS を配置すると、次の HTML で山形の付いた折りたたみ可能なパネルが生成されます。 icons:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<div class="panel-group">

このアプローチは、パネルの現在の状態に視覚的な手がかりを提供することでユーザー エクスペリエンスを向上させ、ユーザーが折りたたみ可能なパネルを理解し、操作しやすくします。

以上がCSS を使用して、Bootstrap 3 アコーディオン パネルに山形アイコンを追加して、折りたたみ状態を視覚的に示すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。