HTML5 アプリケーションにおけるアコーディオンの 3 つの効果の探求の詳細な説明

要約: アコーディオン (「引き出し」とも呼ばれる) エフェクトは、アコーディオンのように見える拡張スタイルにちなんで名付けられました。階層関係を通じて、情報表示と ページ レイアウトの間で賢いバランスが実現されます。したがって、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>

コピー コードの説明: 3 レベル以上のメニューを形成するためにネストできます。

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: "-";}

コピー コードの欠点: 1. 相互にサポートされません。 2. トランジション アニメーション効果は現在サポートされていません。

概要: JS は、低コストで効率的なアコーディオン効果を実現できますが、HTML5 には二重性がありません。エフェクトは低コストで高効率ですが、アニメーション効果がなく、ブラウザのコアが限られています。

構造、スタイル、およびスタイルを分離する Web デザインの概念をさらに推進する CSS3 と HTML5 の導入と開発に期待してください。これにより、パフォーマンスにおける JS への依存が軽減され、Web ページ制作のコストが削減され、Web ページの運用効率が向上します。CSS3 と HTML5 が今後も改善され、より強力な機能が提供されることは期待できます。

推奨事項

大量のコンテンツを含む Web アプリでは、パフォーマンス優先の原則に基づいて、HTML5 を適切かつ適切に使用して、HTML5doctor の作成者は WordPress でアコーディオン効果を実装することを好みます。

以上がHTML5 アプリケーションにおけるアコーディオンの 3 つの効果の探求の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。