要約: アコーディオン (「引き出し」とも呼ばれる) エフェクトは、アコーディオンのように見える拡張スタイルにちなんで名付けられました。階層関係を通じて、情報表示と ページ レイアウトの間で賢いバランスが実現されます。したがって、Web およびアプリのインタラクション デザインで広く使用されています。以前のプロジェクトでは、Accordion は通常 JavaScript コーディングによって実装されました。この共有では、JS に依存せず、純粋な CSS3 または HTML5 を使用して効果を実現する 2 つの方法を検討することに焦点を当てています。そして、そのメリットとデメリットを事前に比較してください。
従来の JS 実装方法
1. ネイティブ JavaScript
2. JS ライブラリ ファイル、jQuery、jQuery Mobile を呼び出す
$'.menu_lev1').clickfunction) { var _this=$this), _next=_this.next); if _next.is':visible')) { $'.menu_lev1').removeClass'on'); $'.menu_lev2').slideUp600); _this.addClass'on'); _next.slideDown600); } else { _next.slideUp600); _this.removeClass'on'); } return true; });
コードの欠点: 効率が低く、コストが高く、 動作がスタイルと密接に結びついている。
CSS3擬似クラス: target
target は、CSS3 の新しい擬似クラスの 1 つです。 アンカーポイントを介して、指定されたスタイルをターゲット要素に追加できます。ページ内のアンカー ポイントは独自であるため、相互に排他的な回転効果を実現できます。 サンプルコード1:h1第一階層ディレクトリ/h1>
ul id="ac1"> li>二级菜单1/li> li>二级菜单2/li> li>二级菜单3/li> /ul>
コードをコピー
ul{ display:none;} ul:target{display:block;}
コードをコピーサンプルコード2:c1">第一階層ディレクトリ/a>/h1>
ul id="ac1"> li>二级菜单1/li> li>二级菜单2/li> li>二级菜单3/li> /ul> h1>2">一级目录/a>/h1> ul id="ac2"> li>二级菜单1/li> li>二级菜单2/li> li>二级菜单3/li> /ul> h1>一级目录/a>/h1> ul id="ac3"> li>二级菜单1/li> li>二级菜单2/li> li>二级菜单3/li> /ul>
コードをコピー
ul{ display:none;} ul:target{display:block;}
コピーcode サンプルコード 3: div id="ac1" >
h1>a >一级目录/a>span>/span>/h1> ul> li>二级菜单1/li> li>二级菜单2/li> /ul> /div> div id="ac2" > h1>a >一级目录/a>span>/span>/h1> ul> li>二级菜单1/li> li>二级菜单2/li> /ul> /div> div id="ac3" > h1>a 3">一级目录/a>span>/span>/h1> ul> li>二级菜单1/li> li>二级菜单2/li> /ul> /div>
コードをコピー
ul{-webkit-transition:all ease 1s; } div:target ul{height:400px;} div:target span{-webkit-transform:rotate90deg);}
コードをコピー Css3 疑似クラス: targetl 欠点: 1. 二元的ではない 2. HTML5 タグの概要&details
summary&details は HTML5 の 2 つの新しいタグです。強力な 意味性 を備えていることに加えて、この機能を利用するために、一般に軽量のアコーディオン効果を作成するのも簡単です。つまり、これら 2 つのタグはペアで使用する必要があります。
サンプル コード 1: 詳細>
summary>一级目录/summary> ul> li>二级菜单/li> li>二级菜单/li> li>二级菜单/li> /ul> /details>
コードをコピーする デフォルトのスタイル: 詳細がデフォルトで展開されるように、open 属性を追加できます。現在、WebKit カーネルでのみサポートされています。
サンプル コード 2: 詳細>summary>一级目录/summary> ul> li>二级菜单/li> li>二级菜单/li> li>二级菜单/li> /ul> details> summary>二级菜单/summary> ul> li>三级菜单/li> li>三级菜单/li> li>三级菜单/li> /ul> /details> /details>
details summary::-webkit-details-marker {background: red;color: #fff;font-size: 200%;} summary::-webkit-details-marker { display: none } summary:after { content: "+";} details[open] summary:after {content: "-";}
推奨事項
大量のコンテンツを含む Web アプリでは、パフォーマンス優先の原則に基づいて、HTML5 を適切かつ適切に使用して、HTML5doctor の作成者は WordPress でアコーディオン効果を実装することを好みます。
以上がHTML5 アプリケーションにおけるアコーディオンの 3 つの効果の探求の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。