콘텐츠를 전환하는 다른 (그리고 현대적인) 방법

마스터 현대 웹 컨텐츠 전환 기술 : 작별 인사 !

display: none

일을 잘하고 싶다면 먼저 도구를 연마해야합니다.

—— 아브라함 마스 로우

친숙한 도구를 사용하는 데 익숙해지기 쉽습니다. 컨텐츠 전환의 경우 일부 JavaScript 코드가 보충 된 또는

를 사용하는 데 사용될 수 있습니다. 그러나 오늘날 웹 기술은 더 현대적이며 이제 다양한 콘텐츠 전환 방법을 포괄적으로 살펴볼 때입니다. 어떤 기본 API가 지원되는지, 장단점 및 모르는 세부 사항 (예 : 의사 요소 및 기타 불분명 한 내용).

요소, 대화 상자 API, Popover API 등을 논의 해 봅시다. 우리는 귀하의 요구에 따라 각 방법을 사용하는시기를 탐색 할 것입니다. 모달 또는 비 모달? 자바 스크립트 또는 순수한 HTML/CSS? 걱정하지 마십시오. 하나씩 설명하겠습니다.

및

요소

응용 프로그램 시나리오 : 콘텐츠 세부 사항을 독립적으로 또는 아코디언 스타일 구성 요소로 전환 할 수 있도록 액세스하기 쉬운 방식으로 컨텐츠 요약.

2024 년 12 월 12 일 업데이트 : Chrome 블로그의 새 기사는 애니메이션 갤러리와 부분적으로 열린 display: none (애니메이션에 opacity: 0를 사용할 수있는 옵션이 있습니다)를 포함하여

를 사용하는 몇 가지 흥미로운 방법을 보여줍니다.

릴리스 순서대로 및 <details></details> 요소는 JavaScript 또는 독특한 확인란 트릭을 사용하지 않고 컨텐츠를 처음으로 전환 할 수있는 시간을 표시합니다. 그러나 브라우저 지원이 부족하면 새로운 기능의 인기를 방해 할 것입니다. 특히이 기능에는 키보드 접근성이 부족합니다. 2011 년 Chrome 12가 출시 된 이후로 사용하지 않았다면 이해할 수 있습니다. 화가 나지 않거나 기분이 좋지 않습니까? <summary></summary> 다음은 핵심 사항입니다 :

는 JavaScript없이 잘 작동합니다 (타협없이).

비표준 의사 사전기를 사용하지 않고 마크를 숨길 수 있습니다. <summary></summary> 여러

요소를 연결하여 아코디언 스타일 구성 요소를 만들 수 있습니다.

그리고 ... 2024 년부터 완전한 애니메이션이 될 수 있습니다.

요소의 태그 당신이 필요로하는 것은 : 입니다 백그라운드에서 내용은 의사 요소로 래핑되며 2024 년부터 <details></details>를 사용하여 선택할 수 있습니다. 또한, <details></details>가 켜져 있는지 여부를 나타내는 pseudo element가 있으며,이를 사용자 정의 할 수 있습니다. calc-size 이것을 염두에두고, 배경에서는 실제로 다음과 같습니다.

<details><summary>内容摘要（始终可见）</summary>
  内容（单击摘要时切换可见性）
</details>

기본적으로 <details></details>를 켜려면 <details></details> 속성을 ​​에 추가합니다.이 속성을 open를 켜면 백그라운드에서 발생하는 것과 동일합니다. <details></details>

<details><summary><::marker></::marker>内容摘要（始终可见）</summary><::details-content>
      内容（单击摘要时切换可见性）
  </::details-content></details>

요소의 스타일 설정 솔직히 말해서 : 당신은 그 성가신 마크를 제거하고 싶을 수도 있습니다.

속성을 ​​ : 이외의 값으로 설정하여이를 수행 할 수 있습니다. 또는 마크를 수정할 수 있습니다. 실제로 다음 예제는 글꼴을 사용하여 다른 아이콘으로 대체하지만

는 많은 속성을 지원하지 않는다는 것을 기억하십시오. 가장 유연한 솔루션은 <summary></summary>의 내용을 요소로 래핑하고 CSS에서 선택하는 것입니다. display list-item

다중

...

를 사용하여 아코디언 스타일 구성 요소를 만듭니다 아코디언 스타일 구성 요소를 만들려면 속성을 ​​사용하여 여러 요소 이름을 지정하고 일치하는 값 (무선 버튼 구현 방법과 유사)을 사용하십시오.

래퍼를 사용하여 래퍼를 사용하여 수평 탭으로 바꿀 수도 있습니다. ::marker <summary></summary> CSS에서 Popover API를 사용하는 방법을 알고 싶다면 John Rhea의 기사를 확인할 수 있습니다.

summary {
  display: block; /* 或任何其他非 list-item 的值 */
}

JavaScript 기능을 추가하십시오 몇 가지 JavaScript 기능을 추가하고 싶습니까?

<details><summary>内容摘要</summary>
  内容
</details>

액세스 가능 <details></details> 요소 를 작성하십시오 일부 규칙이 준수되는 한 요소가 액세스 할 수 있습니다. 예를 들어,

는 기본적으로 a name이며, 이는 초점을 맞출 때 화면 리더가 콘텐츠를 발표 함을 의미합니다. <details></details> 또는

의 직접 자식 요소가없는 경우

details {

  /* 标记 */
  summary::marker {
    content: "\f150";
    font-family: "Font Awesome 6 Free";
  }

  /* <details>打开时的标记 */
  &[open] summary::marker {
    content: "\f151";
  }

  /* 因为 ::marker 不支持许多属性 */
  summary span {
    margin-left: 1ch;
    display: inline-block;
  }

}</details>

가 아닌 경우 사용자 에이전트는 일반적으로 시각적으로 그리고 보조 기술로 "세부 사항"으로 표시되는 태그를 만듭니다. 구형 브라우저는 그것이 첫 번째

하위 요소라고 주장 할 수 있으므로 첫 번째 자식 요소로 설정하는 것이 좋습니다.

또한,

<details name="starWars" open=""><summary>前传</summary><ul>
<li>第一集：幽灵的威胁</li>
    <li>第二集：克隆人的进攻</li>
    <li>第三集：西斯的复仇</li>
  </ul></details><details name="starWars"><summary>原版</summary><ul>
<li>第四集：新希望</li>
    <li>第五集：帝国反击战</li>
    <li>第六集：绝地归来</li>
  </ul></details><details name="starWars"><summary>续集</summary><ul>
<li>第七集：原力觉醒</li>
    <li>第八集：最后的绝地武士</li>
    <li>第九集：天行者的崛起</li>
  </ul></details>

는 버튼 역할을 갖기 때문에 에서 유효하지 않은 것은 에서 유효하지 않습니다. 여기에는 제목이 포함되어 있으므로

<div>
  <details name="starWars" open=""> ... </details><details name="starWars"> ... </details><details name="starWars"> ... </details>
</div>

스타일을 제목으로 할 수 있지만 실제로 에 제목을 삽입 할 수는 없습니다. 공간 제한으로 인해 나머지 모든 컨텐츠를 번역 할 수 없습니다. 다른 부품을 제공하면 번역하기 위해 최선을 다하겠습니다.

위 내용은 콘텐츠를 전환하는 다른 (그리고 현대적인) 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!