この記事は元々 Rails Designer で公開されたものです

HTML と CSS が長年にわたって大幅に改良されていることは周知の事実です。 JavaScript を書くのが楽しくなりましたが、できる限りJavaScript を書いています。

JavaScript を必要としないものの 1 つは、典型的なアコーディオンです。これは、Vue、Alpine、Stimulus などの JS フレームワークを使用して簡単に作成できる種類のコンポーネントですが、最も基本的なバージョンでは、それらはどれも必要ありません。見た目を良くするために必要なのは CSS だけです。

この例は私が目指しているものです。典型的な FAQ リストのスタイルである必要はないことがわかります。このようなセクションに使用しても、まったく問題なく機(jī)能します。

この記事の引用元:

• 基本;
• 視覚的な面白さを追加します;
• あまり知られていない高度な Stimulus 機(jī)能を使用して、プログレッシブ機(jī)能強(qiáng)化を冷卻します。

基本

最も基本的なバージョンは次のようになります:

<details>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details>
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

これがどのように見えるかです:

実際の例については、元の記事をご覧ください。 ?

あまり美しくありませんが、機(jī)能します!

詳細(xì)/概要屬性

詳細(xì)/概要要素には興味深いトリックがいくつかあります。

• open - 屬性;デフォルトで 1 つまたは複數(shù)の要素を開くようにこの屬性を設(shè)定できます (以下の CSS にも使用されます);
• 名前屬性を追加します。これにより、details 要素を 1 つだけ開くことができます。 1 つを開くと、他のすべても自動(dòng)的に閉じます。

<details name="more" open>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details name="more">
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

チェックしてください:

実際の例については、元の記事をご覧ください。 ?

視覚的な面白さをさらに加える

デフォルトでは見た目があまり良くないので、CSS を追加してアプリに合わせて調(diào)整しましょう。重要な部分は次のとおりです:

• [&::-webkit-details-marker]:hidden;これにより、デフォルトのシェブロンが非表示になります;
• グループオープン/詳細(xì):回転-180;これにより、カスタム山形アイコンがその狀態(tài)に基づいて回転します。

Tailwind CSS を使用した完全バージョンは次のようになります:

<details>



<p>This is how it looks:</p>

<blockquote>
<p>View the original article to live examples. ?</p>
</blockquote>

<h2>
  
  
  Progressive enhancements
</h2>

<p>A <strong>toggle</strong> event is dispatched on the <strong>details</strong>-element whenever it state changes. So you could listen for it like this:<br>
</p>

<pre class="brush:php;toolbar:false">details.addEventListener("toggle", (event) => {
  if (details.open) {
    // Do something
  } else {
    // Do something else
  }
});

これは何に使えますか?たとえば、details 要素の狀態(tài)をブラウザーの localStorage に保存して、全體にわたって永続化します。小さな Stimulus コントローラーを使って確認(rèn)してみましょう:

// app/javascript/controllers/accordion_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.open = localStorage.getItem(this.element.id) === "open";

    this.#attachEventListeners();
  }

  // private

  #attachEventListeners() {
    this.element.addEventListener("toggle", (event) => {
      if (this.element.open) {
        localStorage.setItem(this.element.id, "open");
      } else {
        localStorage.removeItem(this.element.id);
      }
    });
  }
}

別の例が必要ですか?典型的な FAQ リストのスタイルは、価格設(shè)定ページで確認(rèn)できます。

プレーン HTML を使用してアコーディオンを追加するのは非常に簡単です。最初は非常にシンプルで、次に CSS で視覚的な面白みを追加し、最後にシンプルな Stimulus コントローラーで段階的な拡張を加えることができます。

以上がJavaScriptを使わないシンプルなアコーディオンの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。