JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Bootstrapで折りたたみ可能なリストグループを作成する方法

Bootstrapでは、panel-collapseクラスとlist-groupクラスを組み合わせることで、クリック時に開閉できる「折りたたみ可能なリストグループ」を簡単に実装できます。パネルの見出し部分をクリックすると、非表示になっていたリストがスムーズに展開される仕組みです。

使用する主なクラス

  • panel-group: 折りたたみパネル全体をまとめるコンテナ
  • panel / panel-default: パネル本体とデフォルトのスタイル
  • panel-heading / panel-title: クリック可能な見出し部分
  • panel-collapse collapse: 開閉の対象となる折りたたみ領域
  • list-group / list-group-item: 折りたたみ領域内に表示するリスト

サンプルコード

以下の例では、list-group-itemクラスを使ってリスト項目(Java、PHP、C++、HTML5、jQuery)を表示しています。見出しの「Info」リンクにはdata-toggle="collapse"属性が設定されており、クリックするとリストの表示・非表示が切り替わります。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "container">
         <h2>質問と回答</h2>
         <p>下記をクリックすると、面接対策コンテンツを提供している技術一覧が表示されます。</p>
         <div class = "panel-group">
            <div class = "panel panel-default">
               <div class = "panel-heading">
                  <h4 class = "panel-title">
                     <a data-toggle = "collapse" href = "#test">Info</a>
                 </h4>
               </div>
               <div id = "test" class="panel-collapse collapse">
                  <ul class = "list-group">
                     <li class = "list-group-item">Java</li>
                     <li class = "list-group-item">PHP</li>
                     <li class = "list-group-item">C++</li>
                     <li class = "list-group-item">HTML5</li>
                     <li class = "list-group-item">jQuery</li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

動作のポイント

アンカー要素に指定したdata-toggle="collapse"とhref="#test"により、IDが「test」の要素が開閉の対象として紐付けられます。初期状態ではcollapseクラスによって内容が非表示になり、見出しをクリックすると展開されます。あらかじめ開いた状態で表示したい場合は、collapseクラスに加えてinクラス(Bootstrap 4以降ではshowクラス)を追加してください。

  1. 【Python】連続する要素を符号ごとにグループ化する方法

    Pythonでは、リスト内の連続する要素を符号（プラス／マイナス）ごとにグループ化したいケースがあります。このような場合、「^」演算子（ビットごとの排他的論理和）と「enumerate」関数を組み合わせたシンプルな反復処理が非常に有効です。 以下に具体的な実装例を示します。 サンプルコード my_list = [15, -33, 12, 64, 36, -12, -31, -17, -49, 12, 43, 30, -23, -35, 53] print(リストの内容：) print(my_list) my_result = [[]] for (index, element) in enu

  2. Outlookで配布リスト(連絡先グループ)を作成・編集する方法|Web版・デスクトップ版の手順を徹底解説

    同僚とのやり取りにOutlookを使用しているなら、メンバーが頻繁に入れ替わる特定のグループに何度もメールを送りたいと感じたことはありませんか。例えば、カスタマーサポート担当者全員に毎日メールを送る必要があるものの、離職率が高くリストの顔ぶれが頻繁に変わる――そんなケースは珍しくありません。毎回一人ひとりの名前やメールアドレスを手入力することも可能ですが、グループが大きくなるほど作業は煩雑になり、入力ミスや送信漏れのリスクも高まります。うっかり誰かを宛先から外してしまえば、職場の人間関係に影響が出る可能性すらあります。そこで活躍するのが「配布リスト」や「連絡先グループ」です。「連絡先グループ」