JavaScript Web ページの効果 - 折りたたみパネル

アコーディオンパネルは、限られたスペースに大量の情報を表示するのに適しています。ページが読み込まれた後、すべてのリスト項目を折りたたまれた状態に設定すると、ユーザーは折りたたまれた項目のタイトルバーをクリックして、現在のタイトルの下にコンテンツを表示するかどうかを切り替えることができます。

1.事例紹介

掲示板の「ヘルプセンター」ページには、新規ユーザー必読、サービス規約、メッセージを残す基本操作、メッセージの削除方法、メッセージを素早く処理する方法などのモジュールがあります。ページがロードされると、図 6-28 に示すように、すべてのモジュールが折りたたまれた状態になります。ユーザーがいずれかのモジュールのタイトルバーをクリックすると、そのモジュールが現在折りたたまれた状態にある場合は展開され、現在展開された状態にある場合は折りたたまれます。「基本メッセージ操作」モジュールが折りたたまれている場合、図 6-29 に示すように、「基本メッセージ操作」モジュールのタイトルバー効果をクリックします。

図 6-28 折り曲げ効果

図6-29 「メッセージ基本運用」の効果拡大

2.事例分析

ページの HTML レイアウトコードは、次のように「基本メッセージ操作」モジュールを例にしています。

<h3> 留言基础操作</h3>
<div>
       <p>1.发表新留言</p>
       <p>2.对其它用户的留言发表评价</p>
       <p>3.对官方给我的回复发表评价</p>
       <p>4.编辑自己的留言</p>
 </div>

ページが読み込まれた後、CSS スタイル「display: none」を設定することにより、すべてのモジュールが折りたたまれます。クリックイベントとそのハンドラーを各モジュールのタイトルバーにバインドします。ユーザーがいずれかのモジュールのタイトルバーをクリックすると、そのモジュールが現在折りたたまれた状態にある場合は、次の兄弟要素ノードの表示属性を「ブロック」に設定し、スタイルをアクティブに設定し、他のモジュールの表示属性を設定します。 to "none"; 現在展開されている場合は、表示プロパティを "none" に設定し、スタイルを空に設定します。

3.事例の実現

  1 <script>
  2   var collapse = document.getElementById('collapse');
  3   var title = collapse.getElementsByTagName('h3');
  4   var content = collapse.getElementsByTagName('div');
  5   for (var i = 0; i < title.length; i++) {
  6     title[i].onclick= function () {   
  7       var current = this.nextElementSibling;    
  8       if (current.style.display == 'block') {
  9         current.style.display = 'none';
 10         this.className = '';
 11     } else {
 12       // 重置所有折叠项内容为隐藏
 13    for (var i = 0; i < content.length; i++) {
 14         content[i].style.display = 'none';
 15         content[i].previousElementSibling.className = '';
 16    }
 17    current.style.display = 'block';
 18    this.className = 'active';
 19     }
 20   }
 21  }
 22  </script>

このケースの完全な HTML および CSS コードについては、本書のソースプログラムを参照してください。上記のコードでは、2 ～ 4 行目ですべてのモジュールタイトルバーとモジュールコンテンツをそれぞれ取得し、5 ～ 6 行目ですべてのタイトルバーのマウスクリックイベントとそのハンドラーをバインドします。コードの 7 行目は、現在のモジュールのタイトルバーに対応するモジュールコンテンツを取得します。コードの 8 ～ 18 行目は、ユーザーがいずれかのモジュールのタイトルバーをクリックすると、モジュールが現在折りたたまれた状態にある場合に、展開されます。現在展開状態にある場合は、折りたたまれます。

ビデオ説明:ケース: 折りたたみパネル_哔哩哔哩_bilibili

ソースコード:清華大学出版局-書籍詳細-「JavaScript フロントエンド開発とサンプルチュートリアル (マイクロクラスビデオ版)」

JavaScript Web ページの効果 - 折りたたみパネル

おすすめ