Pure CSS로 축소 가능한 콘텐츠 목록을 만드는 방법: 페이지의 아무 곳이나 클릭하면 콘텐츠가 숨겨지는 것을 어떻게 방지할 수 있나요?

CSS를 사용하여 원활하게 콘텐츠 숨기기 및 표시

순수한 CSS로 접을 수 있는 콘텐츠 목록을 얻으려면 문제에 직면하게 됩니다. 페이지. 이는 "숨기기" 링크를 클릭할 때만 콘텐츠를 숨기는 원하는 동작에서 벗어납니다.

CSS 솔루션

해결책은 :focus 및 ~ 선택기를 활용하는 데 있습니다. 개정된 CSS 코드:

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>

HTML 마크업

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

솔루션 이해

1. 포커스 상태: :focus 선택기는 포커스를 받은 요소를 대상으로 합니다(예: 클릭 시).
2. 형제 선택기(~): ~ 선택기는 선택한 요소의 형제 요소와 일치합니다.
3. 조건부 표시: CSS 규칙은 .span3 및 .span2 요소의 포커스 상태에 따라 .alert 요소의 표시 속성을 설정합니다.

"Hide Me" 링크(.span3)가 포커스를 받으면 해당 형제 요소인 .alert 요소가 숨겨집니다. 반대로 "Show Me" 링크(.span2)가 포커스를 받으면 해당 형제 요소인 .alert 요소가 표시됩니다. 이렇게 하면 의도한 대로 해당 링크를 클릭할 때만 콘텐츠가 숨겨지거나 표시됩니다.

위 내용은 Pure CSS로 축소 가능한 콘텐츠 목록을 만드는 방법: 페이지의 아무 곳이나 클릭하면 콘텐츠가 숨겨지는 것을 어떻게 방지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!