JavaScript가 없는 간단한 아코디언

이 기사는 원래 Rails Designer에 게시되었습니다

---

HTML과 CSS가 수년에 걸쳐 훨씬 더 좋아졌다는 것은 비밀이 아닙니다. 그리고 JavaScript 작성을 즐기게 되었지만, 여유가 있을 때마다 계속 사용합니다.

JavaScript가 필요하지 않은 것 중 하나는 일반적인 아코디언입니다. Vue, Alpine 및 Stimulus와 같은 JS 프레임워크로 생성하기 쉬운 일종의 구성 요소이지만 가장 기본적인 버전의 경우에는 이러한 구성 요소가 필요하지 않습니다. 그리고 보기 좋게 만들려면 CSS만 있으면 됩니다.

이 예가 제가 원하는 것입니다. 전형적인 FAQ 목록 스타일일 필요는 없습니다. 이와 같은 섹션에 사용하면 완벽하게 작동합니다.

이 기사의 출처는 다음과 같습니다.

• 기본;
• 시각적 흥미를 더하기 위해;
• 잘 알려지지 않은 고급 Stimulus 기능을 사용하여 점진적인 개선을 진행합니다.

기본 사항

가장 기본적인 버전은 다음과 같습니다.

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

  This is more!
</details>

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

  This is even more!
</details>

그 모습은 다음과 같습니다.

실제 사례를 보려면 원본 기사를 확인하세요. ?

가장 예쁘지는 않지만 효과는 있어요!

세부정보/요약 속성

세부정보/요약 요소에는 몇 가지 흥미로운 트릭이 숨어 있습니다.

• 열기-속성; 기본적으로 하나 이상의 요소를 열도록 이 속성을 설정할 수 있습니다(아래 CSS에도 사용됨).
• 이름-속성을 추가하세요. 이렇게 하면 세부정보 요소 하나만 열 수 있습니다. 하나를 열면 다른 모든 항목은 자동으로 닫힙니다.

<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를 추가하여 앱에 맞게 설정해 보겠습니다. 주요 부분은 다음과 같습니다.

• [&::-webkit-details-marker]:숨김; 이렇게 하면 기본 갈매기형 표시가 숨겨집니다.
• 그룹 열기/세부사항:회전-180; 이렇게 하면 상태에 따라 사용자 정의 갈매기형 아이콘이 회전됩니다.

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

이것을 무엇에 사용할 수 있나요? 예를 들어 브라우저의 localStorage에 있는 details 요소의 상태를 저장하여 전체적으로 지속되도록 합니다. 작은 자극 컨트롤러로 확인해 보겠습니다:

// 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 목록 스타일은 가격 페이지에서 확인할 수 있습니다.

일반 HTML로 아코디언을 추가하는 것이 이렇게 간단합니다. 매우 간단하게 시작한 다음 CSS를 사용하여 시각적인 흥미를 더하고 간단한 Stimulus 컨트롤러를 사용하여 점진적인 개선을 통해 마무리할 수 있습니다.

위 내용은 JavaScript가 없는 간단한 아코디언의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!