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

重要な概念：

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

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

本質(zhì)的なCSS知識(shí)：

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

<ul>一般的な兄弟セレクター（

）：指定された要素に従ってすべての兄弟を選択します。 ~隣接する兄弟セレクター（

）

：兄弟の直後の兄弟を選択します。 チェックボックスハック

：チェックボックスのチェック狀態(tài)を使用してCSSの変更をトリガーします。

a codepenデモ（入力で提供されていないリンク省略）は、これらの手法のインタラクティブな例を提供します。

html構(gòu)造：

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

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

<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>

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

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

and

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

.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;
}

を隠します

::before::aftercss：

label:before,
label:after {
  position: absolute;
}

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

で

を模倣します <ul>チェックボックスのチェック狀態(tài)は、非表示のコンテンツを明らかにします：

[type="checkbox"] ~ ul {
  display: none;
}

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

スムーズな遷移の追加：

[type="checkbox"]:checked ~ ul {
  display: block;
}

より滑らかな遷移の場(chǎng)合、

および

：

[type="checkbox"]:checked + label {
  top: 100%;
}

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

を使用してください

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

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

ブラウザの考慮事項(xiàng)：max-heighttransition

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

[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 */
}

結(jié)論：

label {
  transition: top .45s cubic-bezier(.44,.99,.48,1);
}

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

以上が純粋なCSSを使用して「より多く/少ない」機(jī)能を?qū)g裝しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。