[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS

フロントエンドのUIフレームワークは最後の手段として導入しないでください。HTML5とCSS3はすでにほとんどの仕事をこなしているので、前回の"CSS for the cleanest switchesのように、フロントエンドのUIフレームワークを導入しないでください。

そして、多くの人の思考はまだWeb2.0の時代から抜け出せず、UIに様々なライブラリを使い、結果的にページが肥大化してしまっています。今日は、JavaScriptなしで動作する、単一選択の折りたたみメニューをピュアCSSで実装する方法をお教えします。折りたたみメニューとタブは似ていて、論理的にはラジオパネルの一種ですが、折りたたみメニューは通常縦に積み重ねられ、タブは横に並べられるという点が異なります。

タブを表示します。

ラジオ選択式なので、<input type="radio"> ラジオボタンで実装することが可能です。なぜなら、<form>はボタングループの変化を聞くことができ、また、ラジオノードリストのリストを取得し、name属性を通して直接値を変更できるので、非常に便利で、他のcssセレクタを設定する必要がないからです。というわけで、この折りたたみメニューのhtmlは以下のようになります。

<form id="form">
    <input type="radio" name="collapse">
    <div></div>
 
    <input type="radio" name="collapse">
    <div></div>

    <input type="radio" name="collapse">
    <div></div>
</form>

window[id]で直接見つけられるように<form>にidを設定し、各<radio>のnameプロパティは同じにして、form[name]でラジオグループを取得します。form[name].valueは現在選択中のボタンの値、つまり、折りたたみボタンのタイトルを表しています。それぞれの <radio> の後に続く <div> はメニュー展開の内容です。しかし、<radio>はデフォルトでこうなっています。

上記のようにデフォルトのスタイルを appearance: none で無効にしたまま、ボタンの左側の名前を ::before とし（value プロパティを読む）、右側の小さな矢印を ::after とし（文字 > と v）、折りたたみ状態を :checked プロパティで示す。

input[type="radio"] {       
      cursor: pointer;
      appearance: none;
      display: block;
}
 
 
input[type="radio"]::before {
      content: attr(value);
}
 
 
input[type="radio"]::after {       
      float: right;
      content: ">";
}
 
 
input[type="radio"]:checked::after {
      content: "v";
}

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

input[type="radio"] + div {
      display: none;
}
 
 
input[type="radio"]:checked + div {
      display: block;
}

上記が基本的なレイアウトで、これに少しスタイリングを追加すると、こうなります。

しかし、<ラジオ>の性質のために、唯一の別のメニュー項目をクリックすることができます崩壊したい後に選択、メニューの拡張を反転することはできません、もちろん、これは何も、あなたが反転メニューの機能を実装する必要がある場合は、クリックイベントが発生するたびに、最後の拡張メニュー項目を記録する必要があります繰り返しクリックするかどうか：を。

// for every <radio>
radio.onclick = () => {
  if (window.radio === radio) {
    input.checked = false;
    window.radio = null;
  } else window.radio = radio;
};

これは、ラジオ折りたたみメニューの逆選択機能を実装したものです。

ちなみに、図中のわかりにくい文章は、元の文章をスクランブルした結果であり（プライバシー必須）、文字列は以下のコードでスクランブルすることが可能です。

string.split('').sort(() => Math.random() - 0.5).join('')

これは、CSSの単一選択折りたたみメニューの機能を実現するためのこの記事の終わりです、より関連するCSSの単一選択折りたたみメニューの内容は、スクリプトの家の前の記事を検索してくださいまたは次の関連記事を参照してください、私はあなたが将来的にもっとスクリプトの家をサポートして願っています！。