純粋なCSSを使用して「より多く/少ない」機能を実装します

最新のWeb開発は、スライダー、モーダル、ツールチップなどの動的な要素を作成するためにCSSを活用し、JavaScript Relianceを最小限に抑えることがよくあります。この記事では、「より多く/少ない」機能を実装するための純粋なCSSアプローチを示し、機能的なアコーディオンスタイルの例を作成することさえあります。 テクニック、潜在的な問題、およびソリューションを探ります。 ここではアクセシビリティの考慮事項は省略されていますが、将来の改善のための重要な側面です。

重要な概念：

このCSSのみの「より多く/少ない」は、「チェックボックスハック」と兄弟セレクターに依存しています。 HTML構造は、順序付けられていないリストを使用します。最後のアイテムには、非表示のチェックボックスとそのラベルが含まれています。ネストされた順序付けられていないリストは、表示/非表示のコンテンツを保持します。

およびmax-heightCSSプロパティは、スムーズな公開/隠蔽を制御します。 ブラウザの不一致が存在する可能性があります。たとえば、カーソルの動作はブラウザ間で異なる場合があります transition

本質的なCSS知識：

以下を理解することが不可欠です：

一般的な兄弟セレクター（
• ）：指定された要素に従ってすべての兄弟を選択します。 ~隣接する兄弟セレクター（
）
• ：兄弟の直後の兄弟を選択します。 チェックボックスハック
：チェックボックスのチェック状態を使用してCSSの変更をトリガーします。
• a codepenデモ（入力で提供されていないリンク省略）は、これらの手法のインタラクティブな例を提供します。
html構造：

基本的なHTML構造は（オリジナルから単純化されています）：

チェックボックスコンテナのスタイリング：

<code class="language-html"><ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="container">
    <input type="checkbox" id="showHide">
    <label for="showHide"></label>
    <ul>
      <li>Hidden Item 1</li>
      <li>Hidden Item 2</li>
    </ul>
  </li>
</ul></code>

スタイルスタイルラベルを配置してチェックボックスを非表示にします：

ラベルのコンテンツ（「more」または「less」）とアニメーションは、pseudo-elements（

and

）を使用して処理されます。 .container 最初にネストされた

：

<code class="language-css">.container {
  position: relative;
  height: auto;
}

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

label {
  background: #e4e3df;
  display: block;
  width: 100%;
  height: 50px;
  cursor: pointer;
  position: absolute;
  top: 0;
}</code>

を隠します

::before::aftercss：

<code class="language-css">label:before,
label:after {
  position: absolute;
}

/* ... (styles for :before and :after based on checked state) ... */</code>

で

を模倣します <ul></ul>チェックボックスのチェック状態は、非表示のコンテンツを明らかにします：

<code class="language-css">[type="checkbox"] ~ ul {
  display: none;
}</code>

ラベルの位置とコンテンツは、チェック時に調整されます： onclick CodePenデモ（リンク省略）この基本的なトグル効果を紹介します。

スムーズな遷移の追加：

<code class="language-css">[type="checkbox"]:checked ~ ul {
  display: block;
}</code>

より滑らかな遷移の場合、

および

：

<code class="language-css">[type="checkbox"]:checked + label {
  top: 100%;
}

/* ... (styles for :before and :after when checked) ... */</code>

を使用してください

ラベルの遷移も更新されます：

Codepenデモ（リンク省略）は、改善された、よりスムーズな遷移を示しています。

ブラウザの考慮事項：max-heighttransition

カーソルの動作は、ブラウザ全体で一貫性がない可能性があることに注意してください（特にトランジションを使用）。

<code class="language-css">[type="checkbox"] ~ ul {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.44,.99,.48,1);
}

[type="checkbox"]:checked ~ ul {
  max-height: 300px; /* Or a calculated height */
}</code>

結論：

<code class="language-css">label {
  transition: top .45s cubic-bezier(.44,.99,.48,1);
}</code>

この記事は、「より多く/少ない」機能性を示す強力なCSSのみのアプローチを示しています。 制限が存在しますが（主にブラウザの矛盾と事前に決められたmax-heightの必要性が必要です）が、この手法は多くのシナリオに対してクリーンでJavaScriptを含まないソリューションを提供します。 インタラクティブなコンポーネントを構築するときは、常にアクセシビリティを優先することを忘れないでください

以上が純粋なCSSを使用して「より多く/少ない」機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。