CSS만 사용하여 클릭 시 여러 div 표시 여부를 어떻게 전환할 수 있나요?

CSS를 사용하여 클릭 시 Div 가시성 제어

문제:

사용자가 여러 div의 가시성을 전환하려고 합니다. CSS만 사용하여 클릭하면 CSS 없이도 접근성이 허용됩니다. JavaScript.

해결책:

"체크박스 핵" 사용:

1. 숨겨진 체크박스 만들기: 정의 CSS를 사용하여 요소 표시를 없음으로 설정합니다.
2. 클릭 이벤트를 체크박스와 연결: 메뉴 옵션을 클릭하면 체크박스의 체크 속성을 전환합니다.
3. 체크박스 상태에 따른 div 스타일: CSS에서 :checked 의사 선택기를 사용하여 체크박스 상태에 따라 div에 다른 스타일을 적용합니다. 확인란이 선택되어 있는지 여부입니다. 이는 가시성, 페이딩 또는 슬라이딩 동작에 영향을 미칩니다.

코드 예:

<input type="checkbox">

#myCheckbox:checked ~ #myDiv {
  display: block;
  animation: slide-in 0.5s ease-in-out;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

이점:

• 접근성: JavaScript를 활성화하지 않고도 작동합니다.
• 제어: CSS 조정 애니메이션을 사용하여 슬라이드/페이드 동작을 사용자 정의합니다.
• 단순성: 최소한의 CSS 코드가 필요하고 JavaScript는 필요하지 않습니다.

위 내용은 CSS만 사용하여 클릭 시 여러 div 표시 여부를 어떻게 전환할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!