単一選択折りたたみメニュー機能を実現するCSS

前回の「最もシンプルなスイッチを実現するCSS」のように、HTML5とCSS3でほとんどの機能をすでに実装できるため、絶対に必要な場合を除いてフロントエンドUIフレームワークを導入しないでください。

しかし、多くの人の考え方は依然として Web2.0 時代にとどまっており、さまざまなライブラリを使用して UI を作成し、Web ページが肥大化しています。今日は、JavaScript を必要とせず、純粋な CSS を使用して単一選択の折りたたみメニューを実装する方法を説明します。アコーディオンはタブに似ており、論理的にはどちらも単一選択パネルですが、アコーディオンは通常垂直に積み重ねられるのに対し、タブは水平に配置される点が異なります。

タブ:

選択肢は 1 つだけなので、<input type="radio">ラジオ ボタンを使用して実装できます。まず、これらのラジオ ボタン グループの親要素は <form> を使用します。これは、<form> がボタン グループの変更を監視できるだけでなく、RadioNodeList リストを直接取得して name 属性を通じて値を変更できるため、非常に便利であり、他の CSS セレクターを設定する必要がないためです。したがって、この折りたたみメニューの HTML は次のようになります。

<フォームid="フォーム">
    <input type="radio" name="collapse">
    <div></div>
 
    <input type="radio" name="collapse">
    <div></div>

    <input type="radio" name="collapse">
    <div></div>
</フォーム>

<form> の ID を設定して、window[id] から直接見つけられるようにします。各 <radio> の name 属性は一貫している必要があり、form[name] を介してラジオ グループを取得します。form[name].value は現在選択されているボタンの値で、折りたたみボタンのタイトルです。各 <radio> の後には、展開されたメニューのコンテンツである <div> が続きます。ただし、デフォルトの <radio> は次のようになります。

または、まず appearance: none を使用して上記のようにデフォルトのスタイルを無効にし、次にボタンの左側の名前として ::before を使用し (value 属性を読み取ります)、右側の小さな矢印として ::after (文字 > と v)、折りたたまれた状態を示すために :checked 属性を使用します。

入力[type="radio"] {       
      カーソル: ポインタ;
      外観: なし;
      表示: ブロック;
}
 
 
入力[type="radio"]::before {
      コンテンツ: attr(値);
}
 
 
入力[type="radio"]::after {       
      フロート: 右;
      コンテンツ:">";
}
 
 
入力[type="radio"]:checked::after {
      内容: "v";
}

<div> の場合はデフォルトで非表示になっており、選択した <radio> の後ろにある <div> のみが表示されます。折りたたみアニメーションについては、ニーズによって異なります。私にとっては、アニメーションなしの方が爽快です。

入力[type="radio"] + div {
      表示: なし;
}
 
 
入力[type="radio"]:チェック済み + div {
      表示: ブロック;
}

上記は基本的なレイアウトですが、少しスタイルを追加すると次のようになります。

ただし、<radio> の特性上、メニューを反転することはできません。メニューを展開した後は、別のメニュー項目をクリックしてのみ折りたたむことができます。もちろん、これで問題ありません。メニュー選択の反転機能を実装する必要がある場合は、最後に展開したメニュー項目を記録し、クリック イベントが発生するたびに、繰り返しクリックかどうかを判断する必要があります。

// すべての<radio>に対して
ラジオ.onclick = () => {
  if (window.radio === radio) {
    入力がチェックされている = false;
    ウィンドウ.radio = null;
  } そうでない場合は、window.radio = radio;
};

これは、単一選択折りたたみメニューの逆選択機能を実装します。

ちなみに、画像内の乱雑なテキストは、元のテキストがスクランブルされた結果です (プライバシー上の理由により)。次のコードを使用して文字列をスクランブルできます。

文字列.split('').sort(() => Math.random() - 0.5).join('')

CSSでシングルチョイス折りたたみメニュー機能を実装する方法についての記事はこれで終わりです。CSSシングルチョイス折りたたみメニューの関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。