부모가 숨겨져 있을 때 HTML에서 숨겨진 자식 요소를 표시하는 방법은 무엇입니까?

숨겨진 하위 요소 표시

HTML에서 요소의 표시 속성을 "없음"으로 설정하면 해당 요소가 보기에서 효과적으로 숨겨집니다. 그러나 숨겨진 상위 요소 내의 하위 요소를 표시해야 하면 어떻게 되나요?

원래 쿼리

사용자가 정렬되지 않은 중첩 목록으로 작업하는 동안 이 문제가 발생했습니다. 부모 목록 항목이 숨겨져 있어도 하위 목록 항목에 유효성 검사 오류 메시지를 표시하려고 했습니다. 기존 통념에서는 상위 요소가 표시되지 않을 때 하위 요소에 대한 컨텍스트가 부족하여 이것이 불가능할 수 있다고 제안했습니다.

해결책

불가능하지만 상위 요소가 디스플레이일 때 하위 요소를 직접 표시하려면: 없음, 유사한 기능을 제공하는 대체 접근 방식이 있습니다:

가시성 사용

디스플레이를 설정하는 대신 상위 요소의 속성을 "none"으로 설정하려면 가시성 속성을 "hidden"으로 설정하세요. 이렇게 하면 하위 요소가 표시되는 동안 상위 요소가 보기에서 제거됩니다.

CSS 예:

<code class="css">.hide {
    visibility: hidden;
}

.reshow {
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
}</code>

마크업 예:

<code class="html"><ul>
    <li>One</li>
    <li class="hide">
        Two
        <ul>
            <li class="reshow">Re Show Me</li>
            <li>Inner 2</li>
        </ul>
    </li>
    <li>Three</li>
</ul></code>

이 방법을 사용하면 상위 요소는 숨겨진 상태로 유지되지만 클래스가 "reshow"인 하위 요소는 화면 왼쪽 상단에 표시되고 위치하게 됩니다.

추가 고려 사항

• 상위 요소는 숨겨져 있어도 레이아웃에서 여전히 공간을 차지합니다. 이는 페이지의 전체 모양에 영향을 미칠 수 있습니다.
• 이 접근 방식은 상위 요소가 절대 위치에 있거나 특정 높이와 너비가 설정된 경우에만 작동합니다.
• 이 기술은 사용하지 않는 것이 좋습니다. 혼란과 접근성 문제를 초래할 수 있으므로 광범위하게 사용하세요.

위 내용은 부모가 숨겨져 있을 때 HTML에서 숨겨진 자식 요소를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!